Animated Banner

The full width responsive fixed height banner has a background image with an overlay heading and optional text and CTA style link which animate in.
Images
The image file is inserted in three different sizes - one each for computer tablet and mobile phone. The images should be cropped and reduced to the appropriate size before importing into EverWeb. The images used in this demo are 1600px, 1200px and 800px wide respectively.
The image height is set in the widget settings and there is a control for setting a different height when the item is viewed on a mobile phone.
Items
The overlay items are an h1 heading, optional text and an optional CTA style internal link. The items are centered horizontally and vertically over the image. The vertical spacing between the items can be adjusted as can the vertical spacing of the banner from the items above and below it.
Font
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The fallback font is required if the main font is non web safe and not self or Google hosted.
Heading
The banner container is an HTML5 figure element so the heading is an h1. There are controls for font size, font weight, font style, letter spacing and for adjusting the top/bottom and left/right padding.
The heading can have a text shadow using the controls for shadow radius and color. The background can be adjusted for color and opacity.
Text
The text has controls for font size, color, background color and its opacity and to adjust the top/bottom and left/right padding. Text can return to two or more lines using the HTML line break <br> to create returns.
Link
The link tab has controls for setting the font size, color, hover color and the padding. The background can be set for color and opacity and there are controls for border width, color and radius.
Animation
Each item has its own animation controls for setting the animation time, delay and direction. The directions are in down, in right, in up and in left.