Marketing Animated Hero Banner

The banner is full width, fixed height and adjusts to fill the viewport height when viewed on mobile phones.
It has options for an h1 heading, a text block with a heading and a paragraph and a CTA style link. These items are offset as shown when viewed on computers and then align themselves vertically when viewed on tablets and mobile phones. Their background is adjustable for color and opacity.
Images
The image is loaded in three sizes - one for each device type. The images in this demo were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Link
The link can have a border which has a control to adjust its radius. The link can be configured to open an internal or external page and in a new window if required.
Animation
The animation uses CSS transform and transition to create the "panning" effect. Keyframes are used to change the transform origin and scale over time.
The speed of the animation is dependent on the time set in seconds for on iteration.
The scale amount is set using a slider with values of zero to 99. This sets the scale amount to anywhere between 1 and 1.99
The number of cycles can be set from 1 to 5 using the control for "Iteration Count". The control can be set to "infinite" if the animation is required to occur continuously.