Basic Parallax Background Effect in Javascript – BBng.js

Basic Parallax Background Effect

Today, We come up with a parallax background js plugin called BBng.js. It’s a very basic plugin to create a clean and nice looking effect by using different content and image layers.

There is no doubt about that the both video parallax effect and background photos are trending and mostly one-page site use it.

But it is important to make parallax animation perfectly and should be lightweight. Because if it don’t then you may frustrate with slow website speed.

The BBng.js plugin is a small and zero-dependency JavaScript library that applies a refined parallax scrolling impact on background pictures. Based mostly on HTML5 window.requestAnimationFrame API and has assist for offset and callback.

The purpose of using this tiny plugin to make the effect lightweight as much as possible. Another thing, It is very easy to implement and all we need to add a javascript file and define DIV elements with background images.

And you are done. That’s It.

The parallax scrolling is a new web trend for websites where the background images moved at a different speed than the foreground content background while scrolling.

How To Create a Parallax Scrolling Effect

To start making parallax scrolling, All you need to add a bbng.js in your document. When you download the plugin file, You will also find a demo.css file which you don’t need to add. It’s only for creating a demo page to style it.

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

Next, There are two different elements available which you can define in your web page. The div with class name “blank” allows you to add content and for a div element with class name “foo” is provide you effect.

You only need to define the inline style and add background by using the background-image

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

There is no need to stylesheet for create effect but to style the element and text. You can add few lines. We did added following CSS.

<style>
* {
   margin: 0;
   padding: 0;
}
html {
   height: 100%;
}
body {
   height:100%;
}
.blank p {
   color: #fff;
   padding: 4em;
   font-size: 22px;
   text-align: center;
   line-height: 35px;
}
.foo {
   width: 100%;
   height: 50%;
}
.blank {
  height: 350px;
}
</style>

You need to Initialize the bbng library.

<script>
var bbng = new BBNG({ className : 'foo', offset: 2 });
window.onload = function() {
  bbng.render();
}
</script>

Activate the parallax scroll impact.

window.onload = operate()

Code ExamplesYou May Also Like