jquery-parallax-scroll

jquery.parallax-scroll

Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.

Browser Support

Chrome 30+, Firefox 34+, Safari 7.1+, IE 10+

How to use

Insert the script jquery.parallax-scroll.js in your page after jQuery (and jquery.easing.1.3.js if needed), there is no more javascript code required.
Add the attribute 'data-parallax' to the dom elements you want with a json syntax that contains optionnals parameters and properties you want animate.

Parameters

• from-scroll: vertical scroll position the animation starts (default: when the element is visible)
• distance: distance on vertical scroll position the animation will last (default: the window visible height)
• to-scroll: vertical scroll position the animation ends (default: from-scroll + distance)
• smoothness: factor that slowdown the animation, the more the smoothier (default: 30)
• perspective: 3d perspective applied on parent element in case of z axe use (default: 800)


• easing: Easing function used to animate (note that the duration parameter is needed, distance and to-scroll will be ignored) - jquery.easing.1.3.js is required to use the optionnal feature.
• duration: Duration of the easing animation, will be ignore if there is no easing paramater specified (frames)
• easing-return: Easing function for the return, when you scroll up (default: easing)
• duration-return: Duration for the return (default: duration)

Properties

• x: X axis translation (pixels)
• y: Y axis translation (pixels)
• z: Z axis translation (pixels)
• rotateX: X axis rotation (degrees)
• rotateY: Y axis rotation (degrees)
• rotateZ: Z axis rotation (degrees)
• scale: Global scale (ratio)
• scaleX: X axis scale (ratio)
• scaleY: Y axis scale (ratio)
• scaleZ: Z axis scale (ratio)

Multiple animations

You can now increment data-parallax attribute to setup multiple animations:
- data-parallax
- data-parallax2
- data-parallax3
- data-parallax...

Examples

Move down the image by 230 pixels while vertical scrolling from when it shows up on screen bottom to when it disappears on screen top:
<img src="img/paris.jpg" alt="Paris" data-parallax='{"y" : 230}'/>

Translation to the right by 650 pixels with a lower smoothness effect when vertical scroll position is over 50 pixels:
<li data-parallax='{"x": 650, "from-scroll": 50, "distance": 0, "smoothness": 10}'>1</li>

Translation to the right by 650 pixels when vertical scroll position is over 90 pixels, then translation to the bottom by 500 pixels when vertical scroll position is over 400 pixels during a scroll distance of 60 pixels
<li data-parallax='{"x": 650, "from-scroll": 90, "distance": 0}' data-parallax2='{"y": 500, "from-scroll": 400, "distance": 60}'>3</li>

Rotation by 1000 degrees along the X axis from when the exclamation point shows up to the window height distance scroll position:
<p data-parallax='{"rotateX":1000}'>!</p>

Demo

Bonus test with 100 stars