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.
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>
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;
}
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)