☝️Scroll Snap, crea un slider sólo usando CSS 😱

midudev

Resumen

Este vídeo explica cómo implementar sliders funcionales y fluidos utilizando exclusivamente propiedades CSS, eliminando la necesidad de librerías externas de JavaScript. A través de la propiedad 'scroll-snap', se logra un comportamiento de anclaje nativo que funciona perfectamente tanto en escritorio como en dispositivos móviles, mejorando notablemente el rendimiento y la experiencia de usuario.

Capítulos

  1. 0:00Introducción al concepto
  2. 0:22Demostración visual del slider
  3. 1:15La nueva especificación CSS
  4. 1:33Explicación de Scroll Snap Type
  5. 1:56Mandatory vs Proximity
  6. 2:34Propiedad Scroll Snap Align
  7. 3:13Estructura inicial HTML
  8. 3:39Estilos básicos con Flexbox
  9. 4:08Ajuste de imágenes con Object Fit
  10. 4:37Ocultando el desbordamiento
  11. 4:47Aplicando el Scroll Snap
  12. 6:11Resultado final y performance

Temas tratados

  • Evolución de los sliders
  • Introducción a Scroll Snap
  • Diferencias técnicas de especificaciones
  • Propiedad Scroll Snap Type
  • Configuración de Mandatory vs Proximity
  • Implementación de Scroll Snap Align
  • Adaptación con Object Fit

Extracto de la transcripción

hasta hace muy poco para crear un slider nuestras páginas web teníamos que recurrir a librerías ya la script pero con las nuevas propiedades de css scroll snap esto no va a ser más necesario vamos a ver como crear un slider con solo css [Música] este es el slider que vamos a crear con unas imágenes de osos panda el slider se podrá navegar utilizando el scroll de un trackpad y de forma táctil y como veis tiene una experiencia totalmente nativa pero antes vamos a repasar un poco el artículo que escribí el otro día en mi dude puntocom allí os explicaba que siempre se han necesitado librerías javascript para crear sliders y que ahora con un poco de css podemos crear un slider sencillo pero funcional para hacerlo utilizaremos la nueva propiedad llamada scroll snap y nos permite declarar puntos de anclaje al hacer scroll hay que tener cuidado porque hay una especificación antigua que algunos n…