Hero Scroll

Animations which occur as the page is scroll give a much more professional experience than using animation which trigger when in the viewport.
Image
The Scroll Hero image is scaled out on load and reduces in scale as the page is scrolled down.
Text
The text block has a heading, optional styled span, text and optional links which can be internal/external.
Both the final scale and opacity can be adjusted and it can move downwards on page scroll by adding a value for transform on the Y-axis.

Images

The curtain images are inserted as background images and the stage images in an HTML5 element.
The images are …

• Inserted in three sizes for computer, tablet portrait and phone portrait
• Images have an alt text attribute
• Images have a lazy load option

Article Position

Since the overlay is a grid the textbox can be aligned horizontally left, center or right and vertically at the top, center or bottom. There are controls for adding margins to spacing it away from the edges.