ThemeKit UI

Parallax Hero

A parallax hero with a header and optional logo link, an aticle with heading, optional span and text and a navigation with internal/external links.

Parallax

The parallax scrolling effect has been around for a long time, has been used on a large number of websites so it has lost its wow factor.
The problem with using parallax on a responsive website is that the effect tends to be lost and just causes confusion the small screens.
Parallax is best avoided unless there is a way to remove it on small tablets and phones. An exception is when it is used in the hero item.

Parallax

Rather than use a large battery draining parallax script the widget uses a tiny custom jQuery plugin.
The effect is adjusted using a sider control. Maximum value fixes the image in position for scroll over and zero allows it to scroll with the rest of the content. Anywhere in between creates the parallax effect.
The text element on this page has had the wrapper background opecity reduced to zero and the content background has about 33% opacity so that it appears to float over the image.