Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
This tutorial uses jQuery Parallax to acchieve the parallax background effect.
Modules needed
Download and enable Parallax Background.
Configuration:
- 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:
parallax_bg/js/jquery.scrollTo.js
parallax_bg/js/jquery.parallax.js
You could find both scripts here: jQuery Parallax on GitHub.
And thats it!!!