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

Apply Parallax Effects To Any Elements Using jQuery - saparallax.js
File Size: 9.81 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.