Basic Image Parallax Scrolling Effect with jQuery

A basic jQuery & CSS solution to add familiar parallax scrolling effect to position:absolute images using jQuery scroll() event.

How to use it:

1. Add your parallax images into '.parallax-image' containers.

<div class="parallax-image">
  <img src="https://unsplash.it/1800/800?image=289">
</div>
<div class="parallax-image">
  <img src="https://unsplash.it/1800/800?image=277">
</div>
<div class="parallax-image">
  <img src="https://unsplash.it/1800/800?image=274">
</div>
<div class="parallax-image">
  <img src="https://unsplash.it/1800/800?image=271">
</div>
<div class="parallax-image">
  <img src="https://unsplash.it/1800/800?image=275">
</div>

2. The required CSS style rules for the container & parallax images.

.parallax-image {
  height: 600px;
  position: relative;
}
.parallax-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

3. Import the latest version of jQuery library into the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

4. Active the image parallax effect when scrolling.

$(window).scroll(function(){

  // Add parallax scrolling to all images in .paralax-image container
  $('.parallax-image').each(function(){
    // only put top value if the window scroll has gone beyond the top of the image
    if ($(this).offset().top < $(window).scrollTop()) {
      // Get ammount of pixels the image is above the top of the window
      var difference = $(window).scrollTop() - $(this).offset().top;
      // Top value of image is set to half the amount scrolled
      // (this gives the illusion of the image scrolling slower than the rest of the page)
      var half = (difference / 2) + 'px';

      $(this).find('img').css('top', half);
    } else {
      // if image is below the top of the window set top to 0
      $(this).find('img').css('top', '0');
    }
  });

});

---

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