This tutorial uses jQuery Parallax to acchieve the parallax background effect.
Download and enable Parallax Background.
- Define the element you want to apply the Parallax effect using any valid jQuery selector on the modules admin.
- Additionally you need to define the inertia (relative speed) of the background and its horizontal position.
- Depending on the position of your element, you need to apply some top-padding to align the background when entering viewport.
Loading the plugins
Download, rename and save both scripts on the module's /js directory.
They should look like this:
You could find both scripts here: jQuery Parallax on GitHub.
And thats it!!!