El Manipulador

Aprende diseño de los profesionales

Imantar bloques con SCROLL-SNAP

Volver a CSS

Pasando de Javascript…

Si eres diseñador-maquetador-chicoparatodo como yo, pero no controlas de javascript, no pasa nada, CSS se va actualizando permanentemente añadiendo propiedades que nos permiten ir haciendo cosas muy habituales que hasta ahora requerían de JS o librerías como jQuery para facilitarnos la vida, ojo, si quieres personalizar a fondo vas a seguir necesitando javascript, pero si buscas una solución sencillita y sobre todo, mucho más ligera de peso, Scroll-Snap te permite imantar bloques a medida que navegamos la web haciendo scroll. Funciona tanto en vertical como en horizontal y nos puede ayudar, por ejemplo, a maquetar una One-Page simple y del tirón muy fácilmente, o sentar las bases de un slider sin necesidades de pesadas librerías que ralentizan la carga de la web solo para mostrar el contenido de un bloque concreto.

Además Scroll-Snap permite 2 niveles de imatado, el más «agresivo» es mandatory, que tanto si utilizamos el scroll del ratón como pulsando en la barra lateral del navegador hace el cambio de bloque con mucha sensibilidad. Por otro lado proximity hace un imantado más relajado ya que hasta que el bloque contenido no se aproxima al margen del bloque contenedor no realiza la acción, pero bueno si quieres saber y sobre todo ver mejor como funciona, échale un vistazo al vídeo.

También puedes ver el resultado en el Instagram de El Manipulador y subo cosas a Tik Tok.

Además tienes todos los tutoriales (+ de 100) disponibles también en mi canal de Youtube:


Volver