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

El Manipulador
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Si quieres saber más sobre las cookies que utilizamos puedes revisar nuestra política de cookies.