How to Create Parallax Scrolling Background Using Parallax.js
One of web design trend nowadays is web with parallax scrolling background. Parallax scrolling is a web design technique where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion. Background with parallax style makes web looks cool, modern, and smooth when it scrolled.
There are so many plugins and ways to make a web with parallax styled. But, most of them need a complex understanding of the code. So, in this post i will show you a simple and easy way to create web page with parallax scrolling background.
By using parallax.js Jquery plugin developed by Ian Lunn, all we have to do is just adding a few lines of code.
Before i explain step by step to make parallax background, you have to see the demo and download the source code through links above.
In the bundle file you downloaded, there are jquery.min.js and jquery.parallax-1.1.3.js. For the complete library of parallax.js, you can download it here : https://github.com/IanLunn/jQuery-Parallax.
Step 1 – Calling Jquery and Parallax.js
First of all, include the jquery and parallax.js library in the webpage with parallax background that you make. Place them sequentially inside <head> tag or in the bottom of page before closing of <body> tag (above ). If the jquery library has been loaded before, you don’t have to call it again.
<script type="text/javascript" src="path/to/jquery.min.js"></script> <script type="text/javascript" src="path/to/jquery.parallax-1.1.3.js"></script>
Step 2 – HTML Markup
Create HTML markup for each section to be parallax-ed. In this tutorial, the markup that i made is below.
<div class="parallax-block" id="parallax-block-1"> <div class="bg-transparent"> <div class="container"> … <!– Konten di sini –> </div> </div>
div tag with ‘parallax-block’ class and ‘parallax-block-1’ id is the main div. The parallax scrolling background will apply to this div. While, ‘bg-transparent’ is the dark transparent skin that layering the background.
Step 3 – CSS Styling
In this technique, CSS plays an important role. The incorrect CSS will cause the parallax scrolling effect doesn’t work. Parallax.js has a dependency with some CSS style below.
.parallax-block { position: relative; overflow: hidden; background-position:100% 0; background-repeat: no-repeat; background-attachment: fixed; } .parallax-block .bg-transparent { width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.5); } .container { position: relative; overflow: hidden; padding:100px 0; }
Then, to set the background image, you have to add ‘background-image’ property in the main div with id selector.
#parallax-block-1 { background-image: url(image.jpg) ; }
Step 4 – Activate Parallax Scrolling
It’s time to activate parallax scrolling effect using .parallax() function from parallax.js. The example of the configuration code is below.
$("#parallax-block-1").parallax("50%",0.1);
‘50%’ is the ‘x-position’ value for background image, or replacing ‘background-position: 50% 0%;‘. While, ‘0.1’ is the scrolling speed of background. It means that the image background has 1/10 of normal scrolling speed.
Finished. That’s all. It’s easy, right ?
Surely, this is only one of basic parallax design style. Next, you can develop it more complex with other jquery plugins.
That’s all from me. Good luck !