Create A Simple Background Parallax Effect Using jQuery

A minimalist jQuery solution to implement a smooth on-scroll background image parallax effect on a position:relative container.

How to use it:

1. Create a DIV element on your webpage.

<div class="bg"></div>

2. Add a background image to the DIV and make it position:relative.

.bg {
  position: relative;
  z-index: -1;
  height: 500px;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
}

3. Load the needed jQuery library in your webpage.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>

4. Enable the parallax scrolling effect on the DIV element.

$(document).ready(function() {
  $(window).on('scroll', function() {
    yPos = window.pageYOffset;
    shift = yPos * 0.8 + 'px';
    $('.bg').css('top', shift);
  });
});

---

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