https://github.com/lonalore/parallax_bg
Drupal 8 module - Create a Parallax Background effect on any tagged element
https://github.com/lonalore/parallax_bg
drupal drupal-8 drupal-module parallax parallax-scrolling
Last synced: 6 months ago
JSON representation
Drupal 8 module - Create a Parallax Background effect on any tagged element
- Host: GitHub
- URL: https://github.com/lonalore/parallax_bg
- Owner: lonalore
- License: gpl-2.0
- Created: 2017-04-29T15:20:14.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T14:50:29.000Z (over 8 years ago)
- Last Synced: 2025-07-17T23:17:23.987Z (8 months ago)
- Topics: drupal, drupal-8, drupal-module, parallax, parallax-scrolling
- Language: PHP
- Size: 14.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Parallax Background
> This module is an initial Drupal 8 port of [Parallax Background](https://www.drupal.org/project/parallax_bg) module. See [Issue #2861714](https://www.drupal.org/node/2861714) on drupal.org.
This a simple module that allows to set a vertical [Parallax effect](https://ianlunn.co.uk/plugins/jquery-parallax/) on the background of any element on the DOM.
### Installation
- Download [jquery.parallax](https://ianlunn.co.uk/plugins/jquery-parallax/scripts/jquery.parallax-1.1.3.js) library to **/libraries/jquery.parallax/** folder
- Download [jquery.localScroll](https://github.com/flesler/jquery.localScroll/releases/tag/1.4.0) library and unzip files to **/libraries/jquery.localScroll/** folder
- Download [jquery.scrollTo](https://github.com/flesler/jquery.scrollTo/releases/tag/2.1.2) library and unzip files to **/libraries/jquery.scrollTo/** folder
- Finally, install **parallax_bg** module
**Downloaded libraries should look like this:**
- /libraries/jquery.parallax/jquery.parallax.js
- /libraries/jquery.localScroll/jquery.localScroll.min.js
- /libraries/jquery.scrollTo/jquery.scrollTo.min.js
### Configuration
- Goto **Admin / Structure / Parallax elements**
- Add new 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`
### CSS Note
Depending on the position of your element, you need to apply some top-padding to align the background when entering viewport.