How to create parallax scrolling effect
HTML CSS JavaScript

How to create parallax scrolling effect

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

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