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 a simple module that allows to set a vertical Parallax effect on the background of any element on the DOM.
Installation
Download and enable Parallax Background Module.
From jQuery Parallax on GitHub download, rename and save jquery.scrollTo.js and jquery.parallax.js on the module's /js directory.
They should look like this:
parallax_bg/js/jquery.scrollTo.js
parallax_bg/js/jquery.parallax.js
Configuration
- Goto admin page in
/admin/config/user-interface/parallax_bg - Define the element you want to apply the Parallax effect using any valid jQuery selector. The selector should point to the element that holds the background, for example:
#top-content,body.one-page #super-banner - Additionally you need to define the inertia (relative speed) of the background and its horizontal position.
CSS Note
Depending on the position of your element, you need to apply some top-padding to align the background when entering viewport.
Plugins needed
This module uses the jQuery Parallax and jQuery.ScrollTo plugins.
Other jQuery Modules
Project information
- Module categories: Developer Tools
1,731 sites report using this module- Created by hatuhay on , updated
Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
