Tech

How To Create A Parallax Scrolling Effect Using Html And Css

What is Parallax Scrolling?

One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth

Step 1

Add HTML

<!– Container element –>

<div class=”parallax”></div>

 

Step 2

Add CSS

<style>

.parallax {

/* The image used */

background-image: url(“img_parallax.jpg”);

/* Set a specific height */

height: 500px;

/* Create the parallax scrolling effect */

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

</style>

 

credit: http://www.w3schools.com

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top