-
Posts
-
Hello Team X!
I have a full-screen slider at http://www.kirkkwilliams.com/onepage for which I would like to have viewport-based timings. To date, I have not found any method that has worked.
On desktop & notebook screens, I have added “marquee-style” text animations (loosely resembling code being typed). The animations render fine, however when resized to tablet & mobile viewport sizes, my animated layers are off-screen. Of course, I have found a ton of documentation regarding responsive layer visibility, however with this particular design, a responsive behavior will not work for the animation as I designed it (if the text becomes responsive, it no longer resembles typed code, negating the whole concept).
I’ve tried adding additional layers with mobile-only visibility, but the result was lackluster, so I’ve accepted the fact that my creative slide will only be visible on non-mobile devices. I’ve hidden the marquee texts, and modified the remainder of the layers to an acceptable mobile layout, however the problem is that the timings for the slide layers appears to be limited to a “global” setting. The result is a long period of “nothing happening” while my non-responsive layers complete their animations, hidden from the mobile user’s view.
I’m considering two strategies, neither of which I have been able to accomplish (lol), and I’m hoping you can offer some advice on one or both:
Method 1: Specifying unique layer timings that are dependent on the viewport size (similar to how layers can be repositioned or given different attributes based on screen size). If there is a way to accomplish this within the Slider Revolution GUI, I have yet to find it. I’m hoping there may be some scripting that could accomplish this. (?)
Method 2: Specifying the actual content that is loaded – again, dependent on the viewport size. I’d be more than willing to create additional slides (or even a separate slider altogether) that have the mobile / non-mobile attributes I need, but I wouldn’t know where to begin with code that would recognize the screen size and load the appropriate content accordingly. I’ve used jquery & javascript to accomplish similar functions (sort of… I’ve had sites redirect to a specific page if screen size is less than “X”), but I’m a relative newbie to the world of WordPress and have no idea if this is possible, or where to insert said code.
I apologize for the verbosity; I know this is a unique request, but since I haven’t been able to stump your support staff yet, I’m curious to hear what suggestions you may have.
As always, I appreciate your time and look forward to hearing your thoughts!
Cheers,
Kirk W.
Hello Kirk,
For method 1: Please check this:https://www.themepunch.com/revslider-doc/layer-animations-timeline/#layers-timing-sorting
For method 2, Revslider have visibility settings per layer. See attached screenshot and their documentation here:https://www.themepunch.com/revslider-doc/slider-revolution-documentation/
Hope this helps.
