Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Crea hermosas animaciones durante el desplazamiento con la propiedad Clip-Path de CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En un tutorial anterior, aprendimos a crear un efecto de escala de grises a color durante el desplazamiento. Para implementarlo, aprovechamos las características modernas de front-end como CSS Grid, la propiedad clip-path y la API Intersection Observer.

Hoy, utilizaremos estas herramientas y los conocimientos adquiridos en ese tutorial para crear otro genial efecto de desplazamiento. A medida que nos desplacemos, los elementos de la página aparecerán de manera secuencial con una animación de deslizamiento. Este es un efecto de desplazamiento común que puedes ver en los sitios web de portafolios.

Lo que vamos a crear

Sin más preámbulos, revisemos lo que vamos a crear:

Nota: Asegúrate de leer el tutorial anteriormente citado, ya que tomaremos algunos fragmentos de código de él.

1. Empieza con el marcado HTML

Iniciaremos con un elemento section de envoltura que contendrá section s anidadas. Cada subsección tendrá uno de los siguientes tres posibles diseños:

  • Una imagen a la izquierda, texto a la derecha.
  • Texto grande a la derecha.
  • Texto a la izquierda, imagen a la derecha.

Aquí está una representación visual de estos diseños:

The grid layouts

Cabe señalar que para todos los diseños, vamos a usar la misma imagen de Pixabay. Quizá recuerdes que ya la hemos utilizado en otro tutorial de desplazamiento.

El marcado que se requiere:

2. Define los estilos

A continuación, escribiremos los aspectos más importantes de nuestros estilos. Para esta demostración, no discutiremos las reglas de restablecimiento (reset), pues no son nada importante. Así que, vayamos directo al grano:

  • Definiremos las clases grid, grid-alternate y big-text para registrar los diferentes diseños. Los dos primeros aprovechan CSS Grid, mientras que el último establece un ancho máximo con margin-left: auto.
  • Solo para practicar con una nueva función de CSS, usaremos clamp() para crear una tipografía fluida.
  • Cada elemento figure tendrá un pseudoelemento ::before posicionado de forma absoluta. Ese elemento actuará como una superposición de imágenes y se animará primero.
  • Todos los elementos animados se ocultarán al principio gracias a la propiedad clip-path. Nuevamente, para entender realmente cómo funciona esta propiedad, revisa este tutorial.
  • Para encadenar las animaciones, pasaremos los valores apropiados a la propiedad transition-delay de cada elemento. Puedes hacerlos dinámicos usando variables de CSS.
  • En pantallas de hasta 1000 px de ancho, todos los elementos estarán apilados. Asimismo, en las secciones de las imágenes, la imagen siempre aparecerá antes del texto.

Aquí están los estilos correspondientes basados ​​en estas hipótesis:

3. Anima durante el desplazamiento

Mientras nos desplacemos, animaremos únicamente las secciones de la imagen (es decir, las que tienen la clase grid). De manera más específica, animaremos los siguientes elementos con este orden:

  • El pseudoelemento ::before del elemento figure (el que tiene el fondo oscuro).
  • La imagen.
  • El texto de la imagen.
The sequential animations

Cuando al menos el 50% de cada elemento de figure ingrese a la ventana gráfica, recibirá la clase is-animated. De lo contrario, perderá esta clase y quedará oculto.

Así que, cuando la mitad de una figura (figure) esté dentro de la ventana gráfica, los elementos secundarios asociados aparecerán de manera secuencial desde diferentes direcciones. Primero, el pseudoelemento ::before aparecerá desde la derecha, luego la imagen desde la izquierda y finalmente su texto desde la derecha.

El código JavaScript que vamos a necesitar se tomará del tutorial de efectos de escala de grises a color. Solamente tenemos que hacer coincidir diferentes elementos:

Aquí están las reglas CSS asociadas que crean la secuencia de las animaciones:

Nota: En vez de la propiedad clip-path, también podríamos haber utilizado transform para lograr el mismo efecto. Revisa el tercer ejemplo de este tutorial para que obtengas más información.

Conclusión

¡Eso es todo, amigos! Hoy examinamos una forma de revelar elementos secuencialmente durante el desplazamiento aprovechando las nuevas y sorprendentes herramientas de front-end. Sobre todo, creamos este efecto sin utilizar ninguna biblioteca.

Esperemos que puedas enriquecer tus páginas con un efecto similar.

Como nota al margen, antes de que decidas usar estas funciones en un proyecto que requiera soporte para navegadores más antiguos, verifica la compatibilidad en caniuse.com.

Aquí hay un recordatorio de lo que hemos creado:

Si alguna vez has usado la propiedad clip-path para crear algo útil, ¡háznoslo saber! Y como siempre, ¡muchas gracias por leer!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.