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 that both video parallax effect and background photos are trending and the mostly one-page site uses it.
But it is important to make parallax animation perfectly and should be lightweight. Because if it doesn’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 the 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 using JS
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 that 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 the stylesheet to create the effect but to style the element and text. You can add a few lines. We did add the 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 big library.
<script>
var bbng = new BBNG({ className : 'foo', offset: 2 });
window.onload = function() {
bbng.render();
}
</script>
Activate the parallax scroll impact.
window.onload = operate()
