jQuery Plugin For Parallax Effects & CSS3 Animations On Scroll

Parallax Scroll is a lightweight yet robust jQuery plugin helps you apply smooth parallax scrolling effects & CSS3 powered animations on any elements while scrolling down or up the webpage.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Content As User Scrolls - scrollex
• jQuery Plugin To Animate Elements While Scrolling - Animate Scroll
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability
• Revealing Elements on Scroll with jQuery - scrollReveal

How to use it:

1. Load the necessary jQuery library and the jQuery parallax scroll plugin at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.parallax-scroll.js"></script>

2. Apply custom scroll animations to your elements using data-parallax attribute like so.

<img src="1.jpg" alt="Parallax" data-parallax='{"y":230}'>
<li data-parallax='{"x":750,"from-scroll":50,"distance":0,"smoothness":10}'>1</li>
<li data-parallax='{"x":-750,"from-scroll":80,"distance":30}'>A</li>

3. All the parameters and properties for the data-parallax attribute.

// vertical scroll position the animation starts
distance : // default: the window visible height

// vertical scroll position the animation ends 
to-scroll :  // default: from-scroll + distance

// factor that slowdown the animation, the more the smoothier
smoothness : 30

// 3d perspective applied on parent element in case of z axe use
perspective : 800

// X axis translation
x : // in pixels

// Y axis translation
y : // in pixels

// Z axis translation
z : in pixels

// X axis rotation
rotateX : // degress

// Y axis rotation (degrees)
rotateY : // degress

// Z axis rotation (degrees)
rotateZ : // degress

// Global scale
scale: // ratio

// X axis scale
scaleX: // ratio

// Y axis scale
scaleY: // ratio

// Z axis scale
scaleZ: // ratio

Change log:

2015-09-06

• adding the semicolon at the end

2015-03-10

• add scale

---

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