Image Parallax/Blur/Scale Effects In jQuery - Parallax

A fresh new jQuery parallax plugin that applies a configurable and smooth parallax scrolling animations to images on scroll, plus blur and scale effects.

Powered by CSS3 transitions and transforms. Great for showing off your latest work, or just spicing up the occasional page element.

See Also:

• 10 Best Parallax Scrolling Effects

How to use it:

1. Load the parallax plugin after loading the latest jQuery library.

<!-- Slim build is recommended -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery parallax plugin -->
<script src="dist/jquery-parallax.js"></script>

2. Add a group of absolutely positioned images to the page.

<img src="1.jpg" alt="Parallax Image 1" />
<img src="2.jpg" alt="Parallax Image 2" />
<img src="3.jpg" alt="Parallax Image 3" />
...

img {
  max-width:300px;
  display:block;
  position:absolute;
  top:200px; 
  left:200px;
}

3. Config the parallax/blue/scale effects for each image.

var data = [
    {speed:30,blur:3,scale:.8},
    {speed:40,index:2},
    {speed:30,blur:2,scale:.7},
    // ...
];

4. Apply the parallax scrolling effect to the images.

$('img').each(function(i,o){
  $(this).parallax(data[i]);
});

5. All possible plugin options.

$("img").parallax({

  // animation speed in pixels
  speed: 30,

  // or "x"
  axis: "Y",

  // scale factor
  scale: 1,

  // z-index
  index: 0,

  // delay in seconds
  delay: 1.4,

  // blur level
  blur: 0,

  // disable on mobile
  mobile: false,

});

---

This awesome jQuery plugin is developed by paxagency. For more Advanced Usages, please check the demo page or visit the official website.