Animated Hero Overlay & Animated Scroll Down
Hero Overlay
The image is inserted with alt text and in three sizes for computer, tablet and phone. The image can be fixed height with a separate setting for mobile phones or be made viewport height by checking a box.
Overlay
The overlay has an h1 heading, text and a CTA style hyperlink. The link can be comfigured to open an internal or external page and in a new window if required.
Styles
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The heading has controls for font size, mobile font size, font weight, font style, color and letter spacing. It can have a text shadow using the controls for shadow radius and color.
The text has controls for font size and mobile font size and the link has controls for font size and hover color.
The items are centered both horizontally and vertically over the image and there is a control for adjusting their vertical spacing.
The animated overlay has controls for setting the color and opacity.
Animation
The heading, text, link and the overlay each have their own controls for the animation type, time amd delay. The animation by default will occur every time the item is scrolled into the viewport.
There is a control to force the animation to only occur once and another to allow the animation to take effect on mobile phones.
Animated Smooth Scroll Down
The animated smooth scroll down widget is for use with viewport height items. It is inserted below the item on the EverWeb design canvas.
The widget has the anchor built in so that, when clicked or tapped, it will scroll down to the next item on the page. The scroll time is set in milliseconds.
Styles
The chevron down icon can be styled with a color, hover color and a background color with adjustable opacity. The full width container can also be styled for background color and opacity.
Position
Although the scroll down can be used in other situations its main function is to overlay the bottom of a viewport height item to allow the visitor to scroll to the next item down the page.
It is positioned below the item on the design canvas but, when the "Overlay" box is checked, it will appear as an overlay at the bottom on the published page.
Animation
There is a checkbox for turning on the fade in animation if required with controls for animation time and delay.