Basic Parallax Effect In Pure JavaScript – bbng

Preview:

Description:

bbng is a small and zero-dependency JavaScript library that applies a subtle parallax scrolling effect on background images. Based on HTML5 window.requestAnimationFrame API and has support for offset and callback.

How to use it:

Include the JavaScript file bbng.js right before the closing body tag.

<script src="bbng.js"></script>

Add background images to the parallax containers as follows:

<div class = 'foo' style = 'background-image: url("bg1.jpg");'></div>
  ...
<div class = 'foo' style = 'background-image: url("bg2.jpg");'></div>
  ...
<div class = 'foo' style = 'background-image: url("bg3.jpg");'></div>
  ...

Initialize the bbng library.

var bbng = new BBNG({ 
    className : 'foo', 
    offset: 0.9 
});

Activate the parallax scroll effect.

window.onload = function() {
  bbng.render();
}