Basic Parallax Effect In Pure JavaScript – bbng

Category: Animation , Javascript | November 10, 2017
Views Total:486 views
Official Page:Go to website
Last Update:November 10, 2017


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

You Might Be Interested In:

Leave a Reply