Basic Parallax Effect In Pure JavaScript – bbng

Category: Animation , Javascript | November 10, 2017
Author: minnam
Views Total: 264
Official Page: Go to website
Last Update: November 10, 2017
License: MIT


Basic Parallax Effect In Pure JavaScript – bbng


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() {



Leave a Reply