Deslice una imagen para revelar texto con animaciones CSS | Programar Plus

Quiero echar un vistazo más de cerca a la propiedad de animación CSS y recorrer un efecto que usé en mi propio sitio web de cartera: hacer que el texto aparezca detrás de un objeto en movimiento. Aquí hay un ejemplo aislado si desea ver el producto final.

Esto es con lo que vamos a trabajar:

ver la pluma
Animación de texto revelador Parte 4: receptivo de Jesper Ekstrom (@jesper-ekstrom)
en CodePen.

Incluso si no está tan interesado en el efecto en sí, este será un excelente ejercicio para expandir su conocimiento de CSS y comenzar a crear sus propias animaciones únicas. En mi caso, profundizar en la animación me ayudó a tener más confianza en mis habilidades de CSS y aumentó mi creatividad, lo que hizo que me interesara más en el desarrollo front-end en general.

¿Listo? Colocar. ¡Vamos!

Paso 1: Marque los elementos principales

Antes de comenzar con las animaciones, creemos un contenedor principal que cubra la ventana gráfica completa. Dentro de él, estamos agregando el texto y la imagen, cada uno en un div separado para que sea más fácil personalizarlos más adelante. El marcado HMTL se verá así:

<!-- The parent container -->
<div class="container"> 
  <!-- The div containing the image -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>

Vamos a usar este truco de transformación confiable para hacer que los divs se centren tanto vertical como horizontalmente con un position: absolute; dentro de nuestro contenedor principal, y dado que queremos que la imagen se muestre delante del texto, estamos agregando una mayor z-index valor para ello.

/* The parent container taking up the full viewport */
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* The div that contains the image  */
/* Centering trick: https://css-tricks.com/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* Makes sure this is on top */
}

/* The image inside the first div */
.image-container img {
  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  height: 200px;
}

/* The div that holds the text that will be revealed */
/* Same centering trick */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* Places this below the image container */
  margin-left: -100px;
}

Dejamos los prefijos de proveedores fuera de los ejemplos de código a lo largo de esta publicación, pero definitivamente deben tenerse en cuenta si se usan en un entorno de producción.

Esto es lo que nos da hasta ahora, que son básicamente nuestros dos elementos apilados uno encima del otro.

ver la pluma
Animación de texto revelador, parte 1: elementos de correo de Jesper Ekstrom (@jesper-ekstrom)
en CodePen.

Paso 2: ocultar el texto detrás de un bloque

Para que nuestro texto comience a mostrarse de izquierda a derecha, debemos agregar otro div dentro de nuestro .text-container:

<!-- ... -->

  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<!-- ... -->

…y añádele estas propiedades y valores CSS:

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}

Como puede ver, el texto se esconde detrás de este bloque ahora, que tiene un color de fondo blanco para mezclarse con nuestro contenedor principal.

Si intentamos cambiar el ancho del bloque, el texto comienza a aparecer. Continúe e intente jugar con él en el Pen:

ver la pluma
Animación de texto revelador, parte 2: bloque oculto por Jesper Ekstrom (@jesper-ekstrom)
en CodePen.

Hay otra forma de hacer este efecto sin agregar un bloque adicional con un fondo encima. Cubriré ese método más adelante en el artículo. 🙂

Paso 3: Definir los fotogramas clave de la animación

¡Ya estamos listos para las cosas divertidas! Para empezar a animar nuestros objetos, vamos a hacer uso de la propiedad animation y su @keyframes función. Comencemos por crear dos diferentes @keyframes, uno para la imagen y otro para el texto, que terminará luciendo así:

/* Slides the image from left (-250px) to right (150px) */
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}

/* Slides the text by shrinking the width of the object from full (100%) to nada (0%) */
@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}

prefiero agregar todo @keyframes en la parte superior de mi archivo CSS para una mejor estructura de archivos, pero es solo una preferencia.

La razón por la cual el @keyframes solo uso una pequeña porción de su valor porcentual (principalmente del 60 al 100%) es que he elegido animar ambos objetos durante la misma duración en lugar de agregar un animation-delay a la clase a la que se aplica. Esa es solo mi preferencia. Si elige hacer lo mismo, tenga en cuenta que siempre debe tener un valor establecido para 0% y 100%; de lo contrario, la animación puede comenzar a retroceder o aparecerán otras interacciones extrañas.

Para habilitar el @keyframes a nuestras clases, llamaremos el nombre de la animación en la propiedad CSS animation. Entonces, por ejemplo, agregando el image-slide animación al elemento de imagen, haríamos esto:

.image-container img {
  /* [animation name] [animation duration] [animation transition function] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}

El nombre de @keyframes funciona igual que crear una clase. En otras palabras, el nombre realmente no importa siempre que se llame igual en el elemento donde se aplica.

Si eso cubic-bezier parte causa rascarse la cabeza, luego mira esta publicación de Michelle Barker. Ella cubre el tema en profundidad. Sin embargo, a los efectos de esta demostración, es suficiente decir que es una forma de crear una curva de animación personalizada sobre cómo se mueve el objeto de principio a fin. El sitio cubic-bezier.com es un gran lugar para generar esos valores sin todas las conjeturas.

Hablamos un poco sobre querer evitar una animación en bucle. Podemos obligar al objeto a quedarse quieto una vez que la animación alcance el 100% con el animation-fill-mode subpropiedad:

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}

¡Hasta ahora tan bueno!

ver la pluma
Animación de texto reveladora Parte 3: @keyframes de Jesper Ekstrom (@jesper-ekstrom)
en CodePen.

Paso 4: Código para capacidad de respuesta

Dado que las animaciones se basan en un tamaño fijo (píxeles), reproducir el ancho de la ventana gráfica hará que los elementos se muevan fuera de lugar, lo cual es malo cuando intentamos ocultar y revelar elementos en función de su ubicación. Podríamos crear múltiples animaciones en diferentes consultas de medios para manejarlo (eso es lo que hice al principio), pero no es divertido administrar varias animaciones a la vez. En cambio, podemos usar la misma animación y cambiar sus propiedades en puntos de interrupción específicos.

Por ejemplo:

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* Changes animation values for viewports up to 1000px wide */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}

Aquí estamos, todos responsivos!

ver la pluma
Animación de texto revelador Parte 4: receptivo de Jesper Ekstrom (@jesper-ekstrom)
en CodePen.

Método alternativo: animación de texto sin fondo de color

Prometí antes que mostraría un método diferente para el efecto de desvanecimiento, así que hablemos de eso.

En lugar de usar la creación de un div completamente nuevo: <div class="fading-effect"> — podemos usar un pequeño truco de color para recortar el texto y mezclarlo con el fondo:

.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Esto hace que el texto sea transparente, lo que permite que el color de fondo se desvanezca y lo oculte de manera efectiva. Y, dado que este es un fondo, podemos cambiar el ancho del fondo y ver cómo el texto se corta por el ancho que se le da. Esto también permite agregar colores degradados lineales al texto o incluso mostrar una imagen de fondo en su interior.

La razón por la que no seguí esta ruta en la demostración es porque no es compatible con Internet Explorer (tenga en cuenta esos -webkit prefijos de proveedores). El método que cubrimos en la demostración real hace posible cambiar el texto por otra imagen o cualquier otro objeto.

Pequeña animación bastante ordenada, ¿verdad? Es relativamente sutil y actúa como una buena mejora de los elementos de la interfaz de usuario. Por ejemplo, podría verlo usado para revelar texto explicativo o incluso pies de foto. O bien, se podría usar un poco de JavaScript para activar la animación al hacer clic o en la posición de desplazamiento para hacer las cosas un poco más interactivas.

¿Tiene preguntas sobre cómo funciona alguno de ellos? ¿Ves algo que podría mejorarlo? ¡Házmelo saber en los comentarios!

(Visited 3 times, 1 visits today)