onScroll Reveal Hero

The ThemeKit onScroll Hero Reveal widget uses a tiny jQuery plugin to fade out a hero image overlay on scroll.
The image is inserted in three sizes with an alt text aattribute and an optional caption at the bottom. Lazy loading is optional.
The caption can use a web-safe or Google hosted font with a web-safe fallback; It has controls for font size, color text align, line height and background.
Heading
The heading can run to two or more lines. The example uses the Google hosted font Bowlby One SC with a generic fallback.
The heading has the following styling options …

• Font size in viewport units
• Phone font size in pixels
• Line height slider
• Letter spacing in viewport units
• Text color, text stroke & stroke color
• Four sets of controls for text shadow
• Text Shadow - left shadow, right shadow, far right shadow and mobile phone shadow

Overlay animation

The animation reduces the opacity of the overlay on scroll to reveal the image and its caption.
The higher the value for scroll reveal the slower the transition.