Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Mar 6, 2015
Jun 8, 2019
Mar 10, 2015
Mar 10, 2015

jquery.parallax-scroll ⛔️ DEPRECATED

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.


  • 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)


  • 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...


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>


Smooth parallax effect on vertical page scrolling







No releases published


No packages published