Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.
Chrome 30+, Firefox 34+, Safari 7.1+, IE 10+
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.
You can now increment data-parallax attribute to setup multiple animations:
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="https://github.com/alumbo/jquery.parallax-scroll/raw/master/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>