3D Background Parallax Scrolling Effect Using jQuery and CSS3

A minimal jQuery script which makes use of CSS3 translate3d to implement scaling parallax scrolling effects with a little 3D feel.

How to use it:

1. Create a container where you want to implement a background parallax scrolling effect as the user scrolls down or up the web page.

<header id="demo">
  <div class="demo-bg"></div>
</header>

2. Add a background image and other required CSS styles to the Html elements.

#demo {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
}
#demo .demo-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(demo.jpg) center;
  background-size: cover;
}

3. Load the prefixfree.min.js for cross-platform CSS vendor prefixes.

<script src="prefixfree.min.js"></script>

4. Load the jQuery library at the bottom of your web page.

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

5. The Javascript to enable the parallax effect.

$(window).scroll(function(){
  var x = $(this).scrollTop(),
      transY = (x * 0.5), scale = 1 + (x * 0.0003),
      transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';
  $('#demo .demo-bg').css({
    opacity: 1 - (x * 0.0008),
    WebkitTransform: transform,
    MozTransform: transform,
    msTransform: transform,
    transform: transform
  });
});

---

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