Panning & Zooming

The so called "Ken Burns" effect is a method of bringing still images to life in movie production. Although it has been over used and abused - especially in slideshows - it can be effective if used on a hero image.
The hero image is inserted in three sizes with an overlay which can animate in. The effect is created using a keyframe with a CSS transiton to scale the image to create the zoom effect and to translate it on the X and the Y axis to create the horizontal and vertical movement.
Effect Options
The options are created by varyimg the animation time, the scale amount, the animation direction and the iteration count.
Animation time is set in seconds and is the time it takes the animation to complete one iteration.
Scale is varied using a slider which can vary the scale anywhere between 1.0 & 1.5.
Direction can be forward, reverse or alternate. Alternate will cause the animation to play forwards and then reverse. For this to happen, the iteration count must be set an even number.
Iteration Count can be set to 1 for a single forwards or backwards animation, 2 for a sinfle alternate animation and any other number for repetition. The iteration can also be sset to "infinite" for continuous play.
Images
As with any responsive hero iamge, the file must be made available in different sizes for the various viewing device types. The images are inserted using an HTML5 <picture> element so that they can have an alt text attribute for keywords for the search engines.
The images used in this demo were cropped to 1600px, 1200px and 800 px respectively before importing into EverWeb. The size of the images will depend on the quality required and the amount of scale used.
Height
The hero image is full width responsive with a fixed height set in pixels and becomes viewport heigh on mobile phones inportrait mode to fill the screen.
There is a checkbox to make the image viewport height on all devices if required.
Overlay
The overlay has controls for its background color and opacity and can fade in by turning on its animation and setting the time and delay in seconds.
The overlay has a CSS Grid layout with two columns. This allows the text to be positioned left, center or right on wider screens. Media queries are used to center it on mobile devices.
Article
The HTML5 <article> element is vertically centered and has an h1 heading and options for text and a link. The <article> has a maximum width setting and a control to adjust the vertical spacing of the items inside it.
The heading has controls for adding a text shadow and letter spacing. In the example, a text shadow is used to add some weight to the Google hosted font dwStint Ultra Expanded".
The link can open internal or external pages and has a new window option.