Typing

The hero image is inserted in three different sizes - one for each device type. The images are inserted using the HTML5 <picture> element rather than as background images so that it can be fixed for scroll over on iPad and iPhone.
The heading, text block and optional link are positioned using an invisible grid overlay by inserting row and column numbers and column span. The grid items become centered when viewed on a mobile phone and the image fills the screen height.
There is a checkbox in the widget settings to fix he image so that the items below scroll over it.
Images
The images used in this demo are 1600px, 1200px and 800px wide respectively. The smallest image will download fast on a phone and give retina quality in portrait mode.
Logo
The logo is optional and has controls for setting the image width and its position in relation to the top/bottom and left/right of the image. It can be placed at the top or bottom of the image.
Link
The CTA style link is optional and is configured to open an internal page. It can be styled for font size, color, hover color and border radius. It ishares the background color and opacity with the other items.
Fonts
The widget can use a web safe font or a non web safe of Google hosted font with a web safe fallback.
The "typewriter" font can also use a Goog;e hosted font. The default font is Courier New with fallback to the monospace generic group.
Typing
The typing text is contained in a hidden <div> and animated using Javascript.
The typing speed can be adjusted using a slider - lower is faster. The typing can be set to loop if ithe purpose is to drive the visitor insane!