How To Create Parallax scrolling effect using CSS.

How To Create Parallax scrolling effect using CSS
How To Create Parallax scrolling effect using CSS

What Is Parallax

Parallax is a 3D Scrolling Effect we use in Our Websites to make beautiful effects, In this effect, as we scroll, the background of the webpages moves at different speed than the foreground making it look brilliant to the eyes.

In This Article We Will Learn How To Create Parallax scrolling effect using CSS

CSS

<style> 
.parallax { 
    background-image:url(p1.jpg); 
    min-height: 500px;  
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
</style> 

HTML

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
<div class="parallax"></div> 
<div style="height:400px;font-size:60px;"> 
<center>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</center> 
</div> 
<div class="parallax"></div> 

Online Demo

Click Here

Download Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *