Smooth parallax effect on vertical page scrolling
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit a9450a1 Sep 5, 2015
alumbo Merge pull request #3 from luizreginaldo/master
adding the semicolon at the end
Permalink
Failed to load latest commit information.
img Update demo Mar 6, 2015
js adding the semicolon at the end Sep 3, 2015
LICENSE Initial commit Mar 4, 2015
README.md Add scale Mar 10, 2015
demo.html Add scale Mar 10, 2015
stars.html Doc return Mar 10, 2015

README.md

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