EverWeb Widgets

Animated text and floating lazy load swipe slideshow

Lightbox Slider
RGL Row header Slider

Image [1]

Image [2]

Image [3]

Image [4]

Responsive Grid Row Header Slideshow

Grid Layout

The header is created using the CSS Grid Layout Module. The grid has 8 columns with the text block occupying the first four and the background image the rest. The slide in image is floated over the header by placing it in column 3 to span four columns and aligning it vertically in the center.
The optional logo can be placed at the top or bottom left and its distance in can be adjusted in the widget settings. In this demo, the logo is positioned at the bottom of the header because the RGL Overlay Navigation widget is positioned at the top.
Animation
The slide in animations are created by allowing the items to transition in on the x-axis from a position offset to the left or right. There are controls for setting the animation time and delay in seconds for each item.
The speed at which the items enter can be adjusted by changing the distance they have to travel. The longer the distance - the faster they go.
In the example, the text is offset by 200px and the image by 500px. If high speed is your thing, set these to about 2000px.
Text Block
The h1 heading and the text can be aligned left, center or right as can the optional CTA style link. The link is configured to open an internal page.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. If an Apple font that is not available for Windows users is inserted, make sure the fallback font has the same characteristics as the first choice font.
Images
The header is much more efficient in terms of download speed than a full width hero item since the background image only needs to be cropped to about 800px wide and the slide in image to about 600px.
Slideshow
The slider has options to add overlay captions, a border and/or a box shadow. The slider has a maximum width setting. The lower the aspect ratio of the image - the lower the maximum width should be.
The images can be dragged together from a Finder folder and dropped onto the Assets List in the widgets settings panel. Each file name is selected in turn to add the caption.
The slides can be configured as hyperlinks to open internal or external pages and in a new window if required.
The slideshow has controls for adjusting the transition type and time.
Autoplay
Since slideshows should never be set to autoplay on pages that will be viewed on mobile phones, this one has a feature where the slides can autoplay once and stop at the last slide to preserve battery power on mobile devices.

© EverWeb Widgets -