Animated Layer Banner

The full width responsive fixed height banner has a background image with four layers which animate in. These are a heading, a caption, a logo/icon and a CTA style link.
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.
The vertical spacing of the banner from the items above and below it can be adjusted.
Items
The h1 heading is inserted by default and the text, icon and link are optional. The font can be web safe or non web safe or Google hosted with a web safe fallback.
The icon has controls for setting its percentage width, minimum width and the percentage width when viewed on smart phones.
Item Position
After they animate in, the layer items are positioned absolutely over the background image. The values for position X and position Y are expressed as a percentage since this is a responsive design.
Each item has the option to position it from the left or right on the X axis and the top or bottom on the Y axis.
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.
Animate Control
While setting up the widget on the EverWeb design canvas, the animation is turned off. It is turned on prior to publishing the page by checking a box.
The positioning of the items needs to be tested in the browser and using the iOS Simulator with an iPad and iPhone simulation. This requires some trial and error adjustments. After testing, uncheck the Animate control to show the items while adjusting their position.