Creating A One Page Parallax Scrolling Website Using jQuery

In this post we're going to create a background image parallax effect on your one page scrolling website with the help of jQuery and a little javascript magic.

How to use it:

1. Create several content sections for your one page scrolling website as follows. You can add as many sections as you want.

<div class="background">
  <div class="content">
    <p>Section 1</p>
  </div>
</div>

<!--section 2-->
<div class="background">
  <div class="content">
    <p>Section 2</p>
  </div>
</div>

<!--section 3-->
<div class="background">
  <div class="content">
    <p>Section 3</p>
  </div>
</div>

2. The required CSS styles to add background images to your sections.

.background {
  background: url('bg.jpg') no-repeat center 0 fixed;
  height: 1000px;
  position: relative;
}

3. Set the CSS position: absolute; property to your content elements.

.content {
  position: absolute;
}

4. Include the necessary jQuery library in your website.

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

5. Enable the parallax scrolling effect.

$(document).ready(function(){
var $win = $(window);
$('.background').each(function(){
var scroll_speed = 10;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css('background-position', bgPosition);
});
});
});

---

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