Skip to content

alumbo/jquery.parallax-scroll

master
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?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
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.

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>

About

Smooth parallax effect on vertical page scrolling

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published