DEV Community

Cover image for How to make snap scrolling effects using html and css.
Manohar Anand
Manohar Anand

Posted on

How to make snap scrolling effects using html and css.

Hi! What's up this is your boy Manohar Anand From the house of Manoarya.

In this article we are going to assist you with How to make snap scrolling effects using html and css. for free.

Are you Guys exited? Let me know in the comment. Ask Questions and give suggestions.

Let's Started.

See Demo

Fist of all you need to create a file and name it whatever you want.

Now Copy the following codes.

Add HTML Code


            <!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Snap scrolling Effect</title>
</head>
<body>
  <div class="container">
    <div class="snaps">
    </div>
    <div class="snaps">
    </div>
    <div class="snaps">
    </div>
    <div class="snaps">
    </div>
    <div class="snaps">
    </div>
  </div>
</body>



Enter fullscreen mode Exit fullscreen mode

Add CSS Code


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      scroll-snap-type: y mandatory;
    }
    .container {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #d3d3d3;
    }
    .snaps {
      height: 600px;
      width: 100%;
      background: #ffffff;
      transform: scale(0.9);
      border-radius: 10px;
      scroll-snap-align: center;
    }


Enter fullscreen mode Exit fullscreen mode

That all for this post. I hope you love this project. please share your thoughts and suggestions in comment below.

Thank you For Visiting. By see You soon.

Top comments (0)