Efeitos de scroll sempre foram mais relacionados a dispositivos touch, no entanto, ultimamente vários projetos tem incorporado esse item, enriquecendo a experência do usuário (claro, pra tudo há exceções).
A solução pra aplicar esse efeito, geralmente era algum plugin jQuery ou algo semelhante e a idéia básica consistia em separar o conteúdo em áreas distintas às quais o usuário conseguiria scrollar até elas, ou clicar em algum botão específico e a página fazer o scroll automático.
Aí, vem o mano CSS e fala: “Calma, galera! Tô chegando junto e vamos fazer isso a partir de agora só com CSS.”
CSS Scroll Snap
Tcharaaaaan! Basicamente com ele conseguimos controlar o comportamento do conteúdo de um wrapper com scroll definindo pontos nos eixos x ou y. Com esses pontos marcados, o wrapper vai pular para um desses pontos no conteúdo após o usuário ter feito a ação de scrollar. Seria como se falássemos assim: usuário dá scroll uma vez e vai pra esse ponto! depois vai pra esse outro.. e assim vai. Olha só a documentação oficial.
Stop talking…
Vamos botar a mão na massa e ver essa maravilha. Já aviso de antemão que até a presente data, o suporte segundo o Can I Use não é tão legal, então eu recomendo ver os exemplos abaixo no Firefox.
Basicamente o que vamos fazer é o seguinte: criar um elemento pra servir como wrapper do conteúdo e configurar propriedades como overflow, width e height. A mágica acontece nos seguintes caras:
scroll-snap-type=> onde definimos que iremos utilizar os snap points.scroll-snap-points-xouscroll-snap-points-y=> onde iremos definir os snap points no eixo horizontal ou vertical.repeat(value)=> passamos isso para uma das propriedades acima, para repetirmos os snap points a cada value que configurarmos.
Eaí, podemos chegar em umas brincadeiras mais ou menos assim:
See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.
See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.
Algumas referências e links legais: