Apply Parallax Effects To Any Elements Using jQuery - saparallax.js

saparallax.js is a lightweight jQuery plugin that adds the familiar parallax effect on any DOM elements when scroll down the webpage. Works on both absolutely and relatively positioned elements. Heavily based on CSS3 3D transforms.

Installation:

# NPM
$ npm install saparallax --save

# Bower
$ bower install saparallax

How to use it:

1. First you need to load the saparallax.js script after you've loaded the latest version of jQuery.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="scripts/saparallax.js"></script>

2. Add the 'data-sabglayer' attribute to any parallax element like this:

<img data-sabglayer src="1.jpg">

3. By giving a value to the 'data-sabglayer' attribute, you can control the scroll speed of the elements. Enter a number from 0 (same as foreground) to 2 (will appear static).

<p data-sabglayer="0.5">Content</p>

Change log:

2017-10-16

• JS updated

2017-09-26

• always center the to-be-parallaxed element

---

This awesome jQuery plugin is developed by justMoritz. For more Advanced Usages, please check the demo page or visit the official website.