Simple Parallax Scroll Effect is a basic jQuery & CSS solution to add the familiar parallax scrolling effect to position: absolute images using the scroll function event.

parallax scrolling codepen, parallax scrolling example, pure css parallax background image, parallax effect css examples

A Lightweight JavaScript Library For Easy Momentum & Parallax Scrolling | slickscroll.js

How to make use of it:

1. Add parallax images to “.parallax-image” containers.

<div class="parallax-image">
  <img src="//placekitten.com/g/1200/600" alt="kitty" />
</div>
<div class="parallax-image">
  <img src="//placekitten.com/g/1200/610" alt="kitty" />
</div>
<div class="parallax-image">
  <img src="//placekitten.com/g/1200/620" alt="kitty" />
</div>
<div class="parallax-image">
  <img src="//placekitten.com/g/1200/630" alt="kitty" />
</div>
<div class="parallax-image">
  <img src="//placekitten.com/g/1200/640" alt="kitty" />
</div>

2. Required CSS style rules for container and 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 the jQuery library to the web page.

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

4. Active the parallax photo 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');
    }
  });

});

Basic Image Parallax Scrolling Effect Plugin/Github

See Demo And Download

Official Website(kristyjy): Click Here

This superior jQuery/javascript plugin is developed by kristyjy. For extra Advanced usage, please go to the official website.