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

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 caracterí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 página aparecerán de manera secuencial con una animación de deslizamiento. Este es un efecto de desplazamiento común que puedes ver en los sitios web de portafolios.

Lo que vamos a crear

Sin más preámbulos, revisemos lo que vamos a crear:

Please accept marketing cookies to load this content.

Nota: Asegúrate de leer el tutorial anteriormente citado, ya que tomaremos algunos fragmentos de código de él.

Cómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)
En este nuevo tutorial, empezaremos con algunas imágenes en escala de grises y aprenderemos a revelar suavemente sus variantes de color al desplazarnos. Para lograr...

George Martsoukos
19 de mayo de 2020

CSS

1. Empieza con el marcado HTML

Iniciaremos con un elemento section de envoltura que contendrá section s anidadas. Cada subsección tendrá uno de los siguientes tres posibles diseños:

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

Aquí está una representación visual de estos diseños:

Cabe señalar que para todos los diseños, vamos a usar la misma imagen de Pixabay. Quizá recuerdes que ya la hemos utilizado en otro tutorial de desplazamiento.

El marcado que se requiere:

<section class="main-section">
  <section class="grid">
    <figure>
      <img src="IMG_SRC" alt="">
      <figcaption>...</figcaption>
    </figure>
    <p>...</p>
  </section>
  <section class="big-text">
    <p>...</p>
  </section>
  <section class="grid grid-alternate">
    <p>...</p>
    <figure>
      <img src="IMG_SRC" alt="">
      <figcaption>...</figcaption>  
    </figure>
  </section>
</section>

2. Define los estilos

A continuación, escribiremos los aspectos más importantes de nuestros estilos. Para esta demostración, no discutiremos las reglas de restablecimiento (reset), pues no son nada importante. Así que, vayamos directo al grano:

Definiremos las clases grid, grid-alternate y big-text para registrar los diferentes diseños. Los dos primeros aprovechan CSS Grid, mientras que el último establece un ancho máximo con margin-left: auto.
Solo para practicar con una nueva función de CSS, usaremos clamp() para crear una tipografía fluida.
Cada elemento figure tendrá un pseudoelemento ::before posicionado de forma absoluta. Ese elemento actuará como una superposición de imágenes y se animará primero.
Todos los elementos animados se ocultarán al principio gracias a la propiedad clip-path. Nuevamente, para entender realmente có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 dinámicos usando variables de CSS.
En pantallas de hasta 1000 px de ancho, todos los elementos estarán apilados. Asimismo, en las secciones de las imágenes, la imagen siempre aparecerá antes del texto.

Aquí están los estilos correspondientes basados en estas hipótesis:

/*CUSTOM VARIABLES HERE*/

body {
  font: clamp(16px, 2vw, 22px) / 1.7 "Montserrat", sans-serif;
}

.main-section {
  max-width: 1400px;
  padding: 0 30px;
  margin: 120px auto;
}

.main-section section + section {
  margin-top: 120px;
}

.main-section .grid {
  display: grid;
  grid-column-gap: 60px;
  grid-template-columns: 2fr 1fr;
}

.main-section .grid-alternate {
  grid-template-columns: 1fr 2fr;
}

.main-section .big-text {
  max-width: 800px;
  margin-left: auto;
  font-size: clamp(24px, 2vw, 32px);
}

.main-section figure {
  position: relative;
  box-shadow: -1rem 1rem 3rem -2rem rgba(0, 0, 0, 0.5);
}

.main-section figure::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--blue-sudo);
  transition: clip-path 0.3s;
}

.main-section figure img {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-section figure figcaption {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  mix-blend-mode: overlay;
  transition: clip-path 0.3s 0.9s;
}

.main-section figure::before,
.main-section figure figcaption {
  clip-path: inset(0 0 0 100%);
}

@media (max-width: 1000px) {
  .main-section {
    margin: 60px auto;
  }
  
  .main-section section + section {
    margin-top: 60px;
  }

  .main-section .grid {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
  
  .main-section .grid-alternate figure {
    order: -1;
  }
}

3. Anima durante el desplazamiento

Mientras nos desplacemos, animaremos únicamente las secciones de la imagen (es decir, las que tienen la clase grid). De manera más especí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.

Cuando al menos el 50% de cada elemento de figure ingrese a la ventana gráfica, recibirá la clase is-animated. De lo contrario, perderá esta clase y quedará oculto.

Así que, cuando la mitad de una figura (figure) esté dentro de la ventana gráfica, los elementos secundarios asociados aparecerán de manera secuencial desde diferentes direcciones. Primero, el pseudoelemento ::before aparecerá desde la derecha, luego la imagen desde la izquierda y finalmente su texto desde la derecha.

El código JavaScript que vamos a necesitar se tomará del tutorial de efectos de escala de grises a color. Solamente tenemos que hacer coincidir diferentes elementos:

const targets = document.querySelectorAll(".main-section .grid figure");
const isAnimated = "is-animated";
const threshold = 0.5;

function callback(entries, observer) {
  entries.forEach((entry) => {
    const elem = entry.target;
    if (entry.intersectionRatio >= threshold) {
      elem.classList.add(isAnimated);
      //observer.unobserve(elem);
    } else {
      elem.classList.remove(isAnimated);
    }
  });
}

const observer = new IntersectionObserver(callback, { threshold });
for (const target of targets) {
  observer.observe(target);
}

Aquí están las reglas CSS asociadas que crean la secuencia de las animaciones:

.main-section figure::before {
  transition: clip-path 0.3s;
}

.main-section figure img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-section figure figcaption {
  transition: clip-path 0.3s 0.9s;
}

.main-section figure::before,
.main-section figure figcaption {
  clip-path: inset(0 0 0 100%);
}

.main-section figure.is-animated::before,
.main-section figure.is-animated img,
.main-section figure.is-animated figcaption {
  clip-path: inset(0);
}

Nota: En vez de la propiedad clip-path, también podríamos haber utilizado transform para lograr el mismo efecto. Revisa el tercer ejemplo de este tutorial para que obtengas más información.

Conclusió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 páginas con un efecto similar.

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

Aquí hay un recordatorio de lo que hemos creado:

Please accept marketing cookies to load this content.

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