jQuery Plugin For Parallax Effects & CSS3 Animations On Scroll

jQuery Plugin For Parallax Effects & CSS3 Animations On Scroll
File Size: 270 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.