Effect using css so if you haven't watched that i will leave the link in the description of this video now let me show you how it works we can see that we have this section over here and if i.
Scroll down a little bit and if i leave we can see that it scrolls back to the first section and we can see it always.
Snaps to the first section and if we scroll enough we can see that it snaps to the second section so it depends on how much you scroll but it doesn't stay in any position like.
This in between two sections it always snaps to one of the sections so this is called scroll snapping so i will show you how to add this effect to your blogger website.
And i will also leave the link of the source code in the description of this video so you can go ahead and copy and paste the code to your website so let's get started.
And i just add some title over here i'll just type testing scroll snapping and the first thing you have to do is go into the html view so just click on this button and click.
On html view and now here you can add the html the css and the javascript so let me just open the source code of our scroll snapping.
So here we can see this is the html so i'll just copy this from here and you can go ahead and add whatever you want inside this division so you can just delete this.
Section one text from here and you can add whatever you want over here you can add an image you can add list or whatever you want over here and once you have modified all the code you can just.
Copy this code from here and let's go back to our blogger post and i'll just paste it over here and the next thing we need to do is add the css so here i'll just create a style.
Tag Wesdigital
So let's tap style and i'll just close it over here and let's go back to our source code and let's go to style.css file.And we have to copy everything from here we'll just leave this body styles from here and i'll just copy everything from here till the end but here we can see that we have set the height to 100.
Report height now we have set this height based on our webpage over here because here we can see we have the complete page for the design but in our blogger post we won't.
Have this full width so we will have some limited width and limited height so let's go back to our css and first of all i'll just copy this and we'll make the changes inside the.
Blogger post so i'll just copy everything from here till the end and let's go back to blogger post and i'll just paste it over here inside the.
Style tag and i'll just change the height to let's say 400 pixels and even for the container division we have to set the height to the same value.
So i'll just type 400 pixels or you can even change the height of the scroll element to 100 so it will be the same as the parent which is scroll snap container right now let's go ahead.
And click on publish and confirm and let's click on this view button and let's see whether we have the scroll snapping effect displayed correctly and here we can see we have the section.
One displayed over here and let's scroll down a little bit and we can see that it is snapping to the first section and if we scroll up enough we can see it.
Snaps to the second section
And the same goes with the third section and the fourth section so everything is working all right so that's basically how you add scroll.Snapping to your blogger website now you can go ahead and add your own content over here instead of this text and customize this to your needs all right 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 watching have a nice day you.