EverWeb Widgets
Animated Hero Slider
A full widget, fixed height slider with animated overlays positioned using the CSS Grid Layout Module.
EverWeb Widgets
Animated Items
The options are a heading, text block with a heading and a paragraph and a CTA style link which can open internal or external pages and in a new window if required.
EverWeb Widgets
Animation Direction
The animation direction for each item is set on a per slide basis with options for in down, in left, in right, in up or none.
EverWeb Widgets
Animation Timing
The animation times are set globally with controls for setting the duration and delay for each overlay item.
Animated Overlay Hero Slider
Grid Items
The full width, responsive fixed height slideshow has an invisible CSS grid layed out over the top of it so that the overlay items can be positioned anywhere over the image and remain in their relative position with varying browser/device width. Using CSS grid, this can be done with the minimum of code without resorting to the use of percentage sizes, floats or Javascript.
Images
The image size should be kept as small as possible. The ones used in this demo are 1200px x 750px and this gives a good enough quality at wide browser settings without making the images too large for downloading quickly over cell phone networks.
Lazy Loading
The images are set to lazy load by default to give the page a better chance of downloading reasonably fast in the browser. Even so, the number of images should be kept to a minimum.
Slideshow
The directional arrows can be set to show only on hover and can be hidden on mobile phones if required where the visitor can navigate by swiping.
Autoplay can be set although it is definitelt NOT recommended. In this case, the slide time can be set in milliseconds. If autoplay is really necessary, consider using the Auto Stop version of the slider. Click the "Auto Stop" link below to see it in action.
Slideshow Height
The slideshow has a fixed height which is set in pixels. When viewed on mobile phones, instead of reducing the height it is set to 100vh which means that it will fill the height of the device window.
The slider can also be set to viewport height on computers and tablets by checking a box.
Overlay Items
There are three optional overlay items - an h1 heading, a text block with h2 heading and a paragraph and a CTA style link. These have a background color control with opacity adjustment and a border radius control.
The links can be created using relative or absolute file paths and can open in a new window if required.
Item Positioning
The items are positioned vertically by row number and horizontally by column number. Any item can made to span more than one column or row.
The vertical position and height of the item can be adjusted using the align-self property.
Animation
Each of the three items can have a different animation which is set on a per slide basis. The options are in down, in left, in right, in up or none.
The animation timing is set globally for each overlay item using the controls for duration and delay.
Navigation
The navigation is created using the RGL Overlay Navigation widget. This is placed below the slider on the EverWeb design canvas and appears as an overlay at the top of the item above it.
There is an option to make the mobile "hamburger" icon stick to the top of the device's window.
Search Bar
The info bar is the RGL Modal Search Bar which has a spyglass search icon, a smooth scroll down chevron and an "Email Me" icon.
When clicked or tapped, the search icon opens a Google Custom Search form in a modal window.