Minimalist Cross-browser Parallax Scrolling Effect In jQuery

A jQuery implementation of the Parallax Scrolling Effect that simply alters the background position of your background image on window scroll.

How to use it:

1. Create a container element in which you want to place the parallax background image.

<div class="parallax">
</div>

2. Add a background image to the container element.

1. The image' height must higher than the container's height.
2. The background-attachment property must be set to fixed.

.parallax{
  background-attachment: fixed;
  background-image: url('bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
}

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>

4. The main function for the parallax scrolling effect.

function parallax() {
  var scrolled = $(window).scrollTop() + 1;
  $('.parallax').css('background-position', '0' + -(scrolled * 0.3) + 'px');
}

5. Activate parallax scrolling effect on window scroll. Done.

$(window).scroll(function (e) {
  parallax();
});

---

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