Background Image Parallax Scrolling Effect with jQuery and CSS3

With Html5, CSS3 and a little jQuery magic, we‘re able to create a simple famous parallax effect on the background images as you scroll the web page.

How to use it:

1. Create DIV elements with data-type="background" attributes for the background images defined in the CSS. Create DIV element with data-type="content" attributes for the text content. The html structure should be like this:

<div class="container">
  <section>
    <div class="image" data-type="background" data-speed="2"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>

  <section>
    <div class="image" data-type="background" data-speed="7"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>

  <section>
    <div class="image" data-type="background" data-speed="6"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>
  
  <section>
    <div class="image" data-type="background" data-speed="5"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>
  
  <section>
    <div class="image" data-type="background" data-speed="3"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>
  
  <section>
    <div class="image" data-type="background" data-speed="3"></div>
    <div class="stuff" data-type="content">Your content goes here</div>
  </section>
</div>

2. The required CSS styles for the parallax effects.

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: relative;
  width: 100%;
}
.container section {
  width: 100%;
  height: 100vh;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
.container section:nth-child(1) .image {
  background-image: url(1.jpg);
}
.container section:nth-child(2) .image {
  background-image: url(2.jpg);
}
.container section:nth-child(3) .image {
  background-image: url(3.jpg);
}
.container section:nth-child(4) .image {
  background-image: url(4.jpg);
}
.container section:nth-child(5) .image {
  background-image: url(5.jpg);
}
.container section:nth-child(6) .image {
  background-image: url(6.jpg);
}
.container section .image {
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 500;
  opacity: 0.4;
}
.container section .stuff {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  max-width: 70%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  z-index: 1000;
  color: #e67e22;
  margin: 0 auto;
  font-size: 26px;
  position: relative;
}
.container section .stuff:before, .container section .stuff:after {
  width: 100%;
  height: 1px;
  display: block;
  background-color: #d35400;
  content: "";
  margin: 30px 0;
}

3. Include the necessary jQuery library at the bottom of the document.

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

4. The Javascript to active the background parallax scrolling effect.

function parallaxIt() {
  var $fwindow = $(window);

  $('[data-type="content"]').each(function (index, e) {
    var scrollTop = $fwindow.scrollTop();
    var $contentObj = $(this);

    $fwindow.on('scroll resize', function (){
      scrollTop = $fwindow.scrollTop();

      $contentObj.css('top', ($contentObj.height() * index) - scrollTop);
    });
  });

  $('[data-type="background"]').each(function(){
    var $backgroundObj = $(this);

    $fwindow.on('scroll resize', function() {
      var yPos = - ($fwindow.scrollTop() / $backgroundObj.data('speed')); 
      console.log(yPos)
      var coords = '50% '+ yPos + 'px';

      // Move the background
      $backgroundObj.css({ backgroundPosition: coords });
    }); 
  }); 
  
  $fwindow.trigger('scroll');
};

parallaxIt();

---

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