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 on the small screens of mobile devices.
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.

Images

Parallax uses background images which means the images files are huge and there's no way to inserte alt text for the search engines.
The ThemeKi Prallax Hero inserts the image in three sizes in the foreground so that alt text can be inserted.
The images used in the demo were sized and optimised before importing into EverWeb to …

• Large Image: 960 × 640px - file size 190KB
• Medium Image: 720 × 480px - file size 120KB
• Phone Portrait Image: 375 x 540 ps - file size 75KB
• Images have the option to be lazy loaded

Parallax Effect

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.