Scrolling effects always have been more related to touch devices. However, lately, many projects have used this feature,
The solution to apply this effect was like a jQuery plugin or something similar. The basic idea was to divide the content into different areas that the user could scroll into them or click in some button the page was responsible make the scroll automatic.
So, the CSS guy says: “Take it, easy boys! I’m coming with good news, and we could do it only with CSS.
CSS Scroll Snap
Basically, we can control the behavior of content inside a scroll container setting snaps in the 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 going to the next snap.. and goes on…
Stop talking…
Let’s write a little bit and check this beautiful thing. First, I’ll need to alert you that the support according to Can I Use is not so good, so I recommend Firefox.
Basically, what we are going to do is: create a wrapper element that will hold the content, and we set some properties like overflow, width e height. The magic happens here:
scroll-snap-type=> here, we set that we will use the snap points.scroll-snap-points-xorscroll-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:
See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.
See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.
Some references and links: