Viewing Animated Layer Sliders

Animated Layer Sliders



User: Roddy 6 years ago
The animated layer slider seems to be a “must have” feature in modern web design. The problem with hero sliders is the large image file sizes required which make it hard to get the page to download within the acceptable time of under 3 seconds.

While working on a set of lazy loading widgets, I decided to create some sliders with animated layers. These are based on Slick Slider which has built in “on demand” loading meaning that only the first three images need to be downloaded with the page content.

The animated layers are added by creating a custom jQuery plugin and the layers are animated using CSS. I decide not to use the animate.css stylesheet which EverWeb uses for the animation function. It seemed counter productive to use a 20KB file for just a few animation types. The default animations are built into the custom stylesheet which creates the slider and the layers.

Here’s a preview of the animated layer sliders ...

Content Slider

Layer Slider

Caption & Link Slider

Info Slider

All four sliders can be switched to viewport height if required by checking a box. If you are not familiar with “viewport height” see this demo page. When the page loads, adjust the browser width and height to see the effect.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.