Zoom On Scroll

The hero image zooms up on scroll down. It has an optional animated overlay and an <article> with a heading, text and an optional link.
This is a much better effect to use on a responsive page than parallax which really isn't suitable for use on pages that will be viewed on mobile phones.
Images
The image is inserted in two sizes. The large image in the demo is 1200 x 600px and the mobile image is half that size. The images were optimised before importing into EverWeb to reduce their file sizes to 51KB and 20 KB respectively.
Zoom
The zoom effect is created using a tiny jQuery plugin and is variable using a slider. A setting of zero negates the effect. The amount of zoom varies fro maximum at a setting of 1 and minimum at 20 since it is an inverse proportion.
Article
The overlay has a two column grid layout and the article can be aligned left center or right and top, center or bottom within the grid. On screen widths below the break point the article becomes centered horizontally.
Link
The optional link can open internal or external pages and has a new window option. It can be styled as a text link as shown in the example or as a CTA (Call To Action) with a contrasting background and/or a border.
The example uses an HTML symbol to create the "Apple" style link with a double right pointing chevron.
The HTML symbol is the heavy right pointing angle and it is spaced away from the text using a non breaking space like this …
&nbsp; &#10095; &#10095;

The ThemeKit Reveal Header has an optional logo link and an h1 heading. The container in which heading and logo are inserted has a two column grid layout and is centered with a maximum width setting.
Logo
The logo is in column 1 above the break point and the heading is centered. Below the break point the logo becomes centered in row 1 and the heading is centered in row 2.
The logo has controls for width and padding and for setting the internal link which would normally open the home page.
Heading Animation
The heading can animate in down, right, up or left when it enters the viewport. It can be set to occur once or every time the heading enters the viewport.
By default the animation is turned off for mobile phones. It can be turned on for these devices if required by checking a box.
Background
The background can have a two color gradient with adjustable gradient angle. The effect is created by switching the background colors to and fro over time. The effect can be varied by changing the angle and the animation time.
Like the heading, the background animation is turned off for mobile phones and can be turned on for these devices if required by checking a box.
Position
The header is positioned relatively but can be arranged to overlay the top item on the page - in this case the Zoom Hero - by checking a box.