Scrolling effects always have been more related to touch devices, however, lately, many projects have used this feature,
The solution to apply this effect, generally it was like a jQuery plugin or something similar and the basic idea was to divide the content into different areas which the user cold scroll into them, or click in some button and the page was responsible make the scroll automatic.
So, the CSS guy says: “Take it easy boys! I’m comming with good news and we could do it only with CSS.
CSS Scroll Snap
Basically we can control the behavior of a content inside of a scroll container setting snaps in x and y axis. With these snaps, the wrapper will jump to each of these snaps after the user has made the scroll action. It’s something like: when the user once, go to this snap! After go to next snap.. and goes on…
Let’s write a little bit and check this beautiful thing. But, first I’ll need to alert you that currently the support according Can I Use is not so good, so I recommend the Firefox.
Basically what we are going to do is: create a wrapper element that will hold the content and we set some properties like
height. The magic happens here:
scroll-snap-type=> here we set that we will use the snap points.
scroll-snap-points-y=> here we set the snap points on the x or y axis.
repeat(value)=> we set this for the last property above, to repeat the snap points in each value.
So, with that, we can create some stuffs like that:
Some references and links:
Do you like it? Did I write something stupid? Do you want to improve? Open an issue mentioning the post and let’s talk about it.