And it has this text section two and if i scroll down we can see it snaps to the next division over here and in the same way if we scroll down a little bit.
We can see it snaps to the fourth section so it doesn't scroll and stay in any position like this over here it always snaps to the start of the division and if i scroll down enough we.
Can see it goes to the previous division so this is called scroll snapping so in this video i'll show you how to create this scroll snapping effect using css so let's get started.
right here i have created this folder called scroll snapping and i just opened it with vs code so let's start by creating the necessary files so we need.
To create an html file so let's click on new file and i'll just name it index.html and we also need to have a css file so i'll just create a new file and i'll.
Let's link our css file over here so i'll just type link and press tab and in the edge of i'll just type style.css and the first thing we will do is we'll create a container division so for the.
Container division i will give a class of scroll snap container and in this we can create divisions or sections or whatever you want over here so just create divisions so i'll just.
Create divisions with classes of scroll element so these are the elements that will be displayed over here so you can add any content over here i'll just add some.
Text so let's tap section one right i'll just duplicate this a couple more times and i'll just change these to section two three and four all right that's.
Basically it with the html now let's go to our css and let's start styling this before that let's open this in our browser so i have this extension called live server installed in vs code so once.
You install that you can just right Wesdigital
Click over here in the html and click on open with live server and now we can see that our design is displayed over here in the browser all.Right let's go to our css file and let's start by removing the margins inside the body so let's type body and i'll just set the margin to zero right now let's time the scroll element.
So here we can see we have divisions with class scroll element so let's type dot scroll element and for the scroll elements i'll just give a height.
Of 100 viewport height and let's add a background color of zero zero three zero four nine and let's set the color of the text to white.
And let's bring this text to the center so i'll just type display of flex align items to the center and justify content to the center and i'll also change the font family to roboto.
And sensorif and let's set the font size to 42 pixels and let's set the font weight to bold right now what i will do is i just add.
Different color to even elements so here we can see in the original design we can see we have this background color for the first section and if we scroll down we have a different background color for.
The second section so in this way we have different colors for alternate sections so we can do that easily using css so just tap scroll.
Element colon and child and here you have to type even so this will select the even elements like 2 4 6 and so on so let's add a background.
Color of
F 1 f a double e and for the color of the text i'll just type the dark color over here 0 0 3 0 4 9..And if we scroll down we can see that we have different color for alternate sections right now let's move on to the main part of our video which is scroll snapping so.
Right now if we scroll down we can see we can scroll to any position over here it doesn't scroll snap to any of these sections so let's add that so the first thing you.
Have to do is you have to select the container division so for our scroll element we have a container division called scroll snap container so let's select that here i'll just have scroll.
Snap container and even for this i just have a height of 100 viewport height and we need to set the scroll snap type to why because we need to have vertical.
Scroll and then you have to type mandatory and then for the scroll element you have to type scroll snap align.
And you can add three values over here start and or center so i'll just type start over here all right now the last thing we need to do is add an overflow of auto right now.
Let's go to our browser and let's see whether it works so let's scroll down and we can see that we are scrolling and snapping to the next section if we scroll down to the next section.
We scroll and snap to the next section so everything is working all right we cannot scroll to the middle of any two sections so that's basically how you add.
Scroll snapping to your website using css now you can go ahead and add anything you want over here instead of this text so you can go to the index.html.
File and delete this text from here and add whatever you want over here alright so that's it for this video i will leave the link of the source code in the description of this video and if you.
Have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for.