This module enables a vertical parallax scrolling effect for background images on any HTML element. You can configure which elements to apply the effect to using jQuery selectors and adjust the scrolling speed and horizontal alignment.
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
Installation Drupal 8+
It already contains all js files inside the module folder, no need to download external packages.
Configuration
- Goto admin page in
/admin/config/user-interface/parallax_bg(/admin/structure/parallax_elementfor Drupal 8+) - 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.
Adding background images
Ask your assistant about Parallax Background
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.
Activity
Releases
| Version | Type | Core | PHP | Release date | |
|---|---|---|---|---|---|
| 2.0.0-alpha1 | Pre-release | 8–10 | Dec 4, 2024 |