Parallax scrolling using CSS
Parallax is a scrolling technique used to move background images slowly with content. We can also handle it with JavaScript but I found it has some compatibility issues with browsers.
I tried to do this by using CSS only. It is compatible with all browser and devices. Using css parallax makes website effective and attractive. You can also combine the effect with other CSS features such as media queries and more.
To create parallax, We can use the CSS attribute “background-attachment : fixed“. With the help of this we can easily make parallax scrolling effect. The role of this attribute to fix background images in background and shows only that particular section.
Let’s have a look into code.
How to use:
Create CSS classes –
In CSS classes, we have one common class for parallax to cover images in background and one class to set background images.
Create class for parallax:
[html]
.parallax {
width: 100%;
height: 500px;
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
[/html]
Create classes for background image:
[html]
.parallax-img1 {
background-image: url("images/parallax-img1.jpg");
}
.parallax-img2 {
background-image: url("images/parallax-img2.jpg");
}
[/html]
How to setup your html for a parallax website –
The code in HTML file is pretty simple, we have two sections which contains background image and one content container. Each of the section is having one common CSS class, which you can see in above CSS code. Parallax class set the images in background and covers fullscreen. Every section have a different parallax classes to set different background images which covers the background. Using these it looks effective and attractive.
[html]
<section class="parallax parallax-img1">
<h1>Background image section</h1>
</section>
<section>
<h1>Content section</h1>
</section>
<section class="parallax parallax-img2">
<h1>Background image section</h1>
</section>
[/html]
For more:
Github reference : https://github.com/devendra-gh/Parallax-scrolling-using-CSS
JSfiddle reference : https://jsfiddle.net/6y1vyody/
Hope this will help!!
I was looking for something like this for so long. But all tutorials were so long and verbose. This helps a lot. Great work 🙂