How to create parallax scrolling effect

Parallax scrolling is a design trend in which the background of the web page moves at a slower speed to it's foreground while scrolling.

How to create parallax scrolling effect

Parallax scrolling is a design trend in which the background of the web page moves at a slower speed to it’s foreground while scrolling. Here’s an example of a web page with parallax scrolling effect.

HTML Markup

<div class="parallax-effect">    
    <p>Scroll Up and Down this page to see the parallax scrolling effect</p>
<h4 style="background-color:white;font-size:36px;margin-top:100px;">Scroll Up and Down this page to see the parallax scrolling effect.</h4>
</div>

Add CSS

.parallax-effect{  
    background-image: url("https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg");
  min-height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Try it Yourself


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.