Deslice una imagen para revelar texto con animaciones CSS

Quiero echar un vistazo más de cerca a la propiedad de animación CSS y analizar un efecto que utilicé en el sitio web de mi propio portafolio: 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:

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

¿Listo? Colocar. ¡Vamos!

Paso 1: marcar los elementos principales

Antes de comenzar con las animaciones, creemos un contenedor principal que cubrirá la ventana gráfica completa. Dentro de él, agregamos 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   !-- The div containing the image --  div  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    h1Animation/h1  /div/div

Usaremos este confiable truco de transformación para hacer que los divs se centren tanto vertical como horizontalmente con un interior dentro de nuestro contenedor principal, y como queremos que la imagen se muestre delante del texto, le position: absolute;agregaremos un valor más alto.z-index

/* 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://.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;}

Dejaremos los prefijos de proveedores fuera de los ejemplos de código a lo largo de esta publicación, pero definitivamente deben considerar si se usa esto en un entorno de producción.

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

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

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

!-- ... --  !-- The div containing the text that's revealed --  div    h1Animation/h1    div/div  /div  !-- ... -- 

…y agrega estas propiedades y valores CSS:

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

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

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

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

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

¡Ya estamos listos para lo divertido! Para comenzar a animar nuestros objetos, haremos uso de la propiedad de animación y su @keyframesfunción. Empecemos creando dos diferentes @keyframes, uno para la imagen y otro para el texto, que acabarán quedando 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 @keyframesen la parte superior de mi archivo CSS para una mejor estructura de archivo, pero es solo una preferencia.

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

Para habilitar @keyframesnuestras clases, llamaremos al nombre de la animación en la propiedad CSS animation. Entonces, por ejemplo, al agregar la image-slideanimació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 la @keyframesobra es el mismo que el de la creación de una clase. En otras palabras, el nombre no importa siempre que se llame igual en el elemento donde se aplica.

Si esa cubic-bezierparte te hace pensar, entonces consulta esta publicación de Michelle Barker. Ella trata el tema en profundidad. Sin embargo, para los fines de esta demostración, basta con decir que es una forma de crear una curva de animación personalizada para ver cómo se mueve el objeto de principio a fin. El sitio cubic-bezier.com es un excelente lugar para generar esos valores sin tener que hacer conjeturas.

Hablamos un poco sobre querer evitar una animación en bucle. Podemos forzar que el objeto permanezca quieto una vez que la animación alcance el 100% con la animation-fill-modesubpropiedad:

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

¡Hasta ahora, todo bien!

Paso 4: Código para la 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 salgan de su lugar, lo cual es malo cuando intentamos ocultar y revelar elementos según 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. A cambio, podemos utilizar 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 receptivos!

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 toquemos eso.

En lugar de crear un div completamente nuevo div, podemos usar un pequeño truco de color para recortar el texto y combinarlo 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 detrás de él se traslade y lo oculte de manera efectiva. Y, como se trata de un fondo, podemos cambiar el ancho del fondo y ver cómo el texto se corta según el ancho que se le da. Esto también hace posible agregar colores degradados lineales al texto o incluso una imagen de fondo dentro de él.

La razón por la que no seguí este camino en la demostración es porque no es compatible con Internet Explorer (tenga en cuenta los -webkitprefijos de los proveedores). El método que cubrimos en la demostración real permite cambiar el texto por otra imagen o cualquier otro objeto.

Una animación bastante interesante, ¿verdad? Es relativamente sutil y actúa como una mejora agradable para los elementos de la interfaz de usuario. Por ejemplo, podría verla utilizada para revelar texto explicativo o incluso títulos de fotos. O bien, se podría utilizar un poco de JavaScript para activar la animación al hacer clic o desplazarse por la posición para que las cosas sean un poco más interactivas.

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