Texto en capas 3D: movimiento y cambio

En el capítulo anterior, creamos un efecto de texto jerárquico 3D básico utilizando HTML y CSS. Se ve genial y tiene una imagen visual sólida, pero es completamente estático. Eso está a punto de cambiar.

En este capítulo, exploraremos formas de animar los efectos, agregar transiciones y jugar diferentes cambios. Veremos cómo el movimiento mejora la profundidad y cómo los ajustes sutiles crean una atmósfera completamente nueva.

⚠️ ADVERTENCIA DE MOVE: Este artículo contiene varios ejemplos de animación, que pueden incluir flashing o imágenes de rápido movimiento. Si es sensible al ejercicio, continúe con precaución.

Animación «contraria»

Comencemos con un consejo de animación rápido que lo coincida perfectamente con el texto 3D en capas. A veces queremos rotar el elemento sin cambiar realmente la orientación del texto para mantenerlo legible. El truco aquí es combinar múltiples rotaciones en dos ejes. Primero, gire el texto en el eje z. Luego, agregue una inclinación en el eje X. Finalmente, gire el texto nuevamente al eje Z.

@keyframes wobble {
  from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); }
}

Dado que giramos en el eje z y luego revertimos la rotación, el texto permanece en su dirección original. Sin embargo, dado que agregamos una inclinación al eje X medio, y el eje x en sí gira todo el tiempo, el ángulo de la inclinación también cambia. Esto crea un agitar Muestre el efecto del texto desde todos los ángulos y enfatice la sensación de profundidad.

Si queremos tomar algunos pasos más allá, podemos combinar el swing juntos Flotante Influencia. Haremos .layers Ligeramente a lo largo del eje z:

.layers {
  animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
  from { transform: translateZ(0.3em); }
  to { transform: translateZ(0.6em); }
}

Para vender realmente el efecto, colocaremos el lapso original en su lugar, como un ancla de sombra, cambiaremos su color a transparente y haremos que la animación del factor desenfoque del factor desenfoque text-shadow:

span {
  color: transparent;
  animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
  from { text-shadow: 0 0 0.1em #000; }
  to { text-shadow: 0 0 0.2em #000; }
}

Sincronice estas dos animaciones para darle a todo un sentimiento más realista:

Letras divididas

Ok, ahora que las cosas se están moviendo, esto está empezando a verse mucho mejor. Pero toda la palabra todavía se mueve. ¿Podemos mover cada letra de forma independiente? Como de costumbre, la respuesta es «Sí, pero …»

Es absolutamente posible dividir cada palabra en letras individuales y animarlas por separado. Pero también significa que más elementos se mueven alrededor de la pantalla, lo que puede conducir a problemas de rendimiento. Si sigue esta ruta, trate de no animar demasiadas letras a la vez y considere reducir el número de capas.

Por ejemplo, en el siguiente ejemplo, reduje el recuento de la capa a 16. Hay cinco letras para ponerlas una al lado de la otra. .scene uno display: flexluego usa :nth-child:

Nuevo ángulo

Hasta ahora hemos estado moviendo el texto a lo largo del eje Z, pero definitivamente podemos moverlo aún más. Cada capa se puede mover o girar en cualquier dirección que desee, si basamos estas transformaciones en --n Variable, podemos crear varios efectos interesantes. Estos son algunos con los que he jugado, solo para darte algunas ideas.

En el primero, estoy haciendo translateX Crear un Transferir Influencia:

En otros casos, estoy agregando algunas rotaciones. El primero se aplica al eje Y inclinación Influencia:

El siguiente ejemplo gira la rotación en el eje x inclinación:

Finalmente, podemos aplicarlo al eje z Girar ejemplo:

Retraso de la capa

El uso de una capa separada no solo nos permite ajustar la animación de cada capa; animation-delay Para cada capa, hay algunos efectos muy interesantes. Aceptemos esto pulsación ejemplo:

Ahora, las animaciones se aplican a .layeredText El elemento en sí, solo estoy cambiando su tamaño:

.layeredText {
  animation: pulsing 2s infinite ease-out;
}

@keyframes pulsing {
  0%, 100% { scale: 1; }
  20% { scale: 1.2; }
}

Pero podemos aplicar animaciones a cada capa por separado y darle un poco de retraso a cada capa. tenga en cuenta span es parte de la pila. También es una capa, y a veces debe incluirla en la animación:

.layer {
  --delay: calc(var(--n) * 0.3s);
}

:is(span, .layer) {
  animation: pulsing 2s var(--delay, 0s) infinite ease-out;
}

Aquí estoy usando :is Se pueden usar selectores para cada capa y span Todos tienen la misma animación. El resultado es un efecto más vívido y atractivo:

Camuflaje

En el capítulo anterior, mencioné que generalmente prefiero guardar pseudo-elementos para fines decorativos. Esta es definitivamente una tecnología que vale la pena usar. Podemos dar a cada capa uno o dos pseudo-elementos, agregar algo de contenido y localizarlos de la manera que nos gusta, y el efecto 3D ya existe.

Desde contornos simples hasta formas más interesantes, puede ser cualquier cosa. como flechaPor ejemplo:

Tenga en cuenta que estoy usando :is El selector incluye span También está aquí, pero a veces no queremos apuntar a todas las capas, solo una parte de ellas. En este caso podemos usar :nth-child Seleccione solo parte de la pila. Por ejemplo, si quiero apuntar solo a las doce capas en la parte inferior (veinticuatro capas en total), la decoración cubre solo la mitad de la altura del texto. Puedo hacer algo similar :nth-child(-n + 12) el selector completo será:

:is(span, .layer:nth-child(-n + 12))::before {
  /* pseudo style */
}

Esto es especialmente útil cuando la decoración se superpone con texto y no desea introducir o ser difícil de leer.

Por supuesto, también puedes hacer que estos pseudo-elementos animen. Entonces 3Dcargando“¿Texto con rotador incorporado?

Hice algunos cambios para lograr esto. Primero, seleccioné doce capas desde el centro de la pila utilizando un selector ligeramente avanzado: .layer:nth-child(n + 6):nth-child(-n + 18). Esto se dirigirá del sexto al siglo XVIII.

En segundo lugar, fingir ser una sombra, soy spanpseudo-elemento de. Esto crea un buen efecto suave, pero en algunos casos puede causar problemas de rendimiento, así que tenga en cuenta.

:is(span, .layer:nth-child(n + 6):nth-child(-n + 18))::before {
  /* spinner style */
}

span {
  /* span style */

  &::before {
    filter: blur(0.1em);
  }
}

Pintura facial

Pero no tiene que usar pseudo-elementos para aumentar el interés visual. También puede usar cualquier diseño de texto con patrones personalizados background-image. Simplemente seleccione el nivel superior :last-child Selector, configure su color de texto en transparent Por lo tanto, el fondo se pasa y se usa background-clip: text.

.layer {
  /* layer style */
    
  &:last-child {
    color: transparent;
    background-clip: text;
    background-image: ... /* use your imagination */
  }
}

Esta es una pequeña demostración usando rayas Cable y repeating-linear-gradienty anillo Hecho repeating-radial-gradient:

Y sí, definitivamente puedes usarlo imagen también:

Modo de animación

Vamos a llevar la idea anterior más allá. Lo aplicamos a todas las capas en lugar de simplemente aplicar el patrón a la capa superior, lo que resulta en un efecto de modo 3D completo. Entonces, lo animamos.

Comenzaremos con el color. Primero, damos todas las capas transparent Color de texto. Los colores que usamos antes ahora se almacenarán en una propiedad personalizada llamada --colorlo usaremos en un momento.

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
}

Ahora definamos los antecedentes, vamos a decir que queremos una casa en movimiento tablero de damas patrón. Podemos usar repeating-conic-gradient Hay dos colores. El primero será nuestro --color Variable, la segunda posible transparent. Pero en este caso, creo que los negros con muy baja opacidad son mejores.

Solo necesitamos configurar background-size Las escalas de patrones de control, por supuesto, asegúrese de aplicar background-clip: text También aquí:

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
  background-image:
    repeating-conic-gradient(var(--color) 0 90deg, hsl(0 0% 0% / 5%) 0 180deg);
  background-size: 0.2em 0.2em;
  background-clip: text;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
  animation: checkers 24s infinite linear;
}

@keyframes checkers {
  to { background-position: 1em 0.4em; }
}

Como puede ver, he agregado animation propiedad. En este caso, el modo de animación es muy simple. Solo muévete lentamente background-positionEso es todo. Ahora tenemos texto con el modo 3D móvil:

Fuentes variables

Hasta ahora hemos estado usando fuentes individuales y, como mencioné anteriormente, la selección de fuentes es principalmente una cuestión de pautas de gusto o de marca. Sin embargo, dado que ya estamos usando texto en capas, tenemos que probar absolutamente Fuentes variables. La idea detrás de las fuentes variables es que cada fuente contiene ejes que puede manipular su apariencia. Estos pueden incluir ancho, peso, inclinación o cualquier otra cosa.

Aquí hay algunos ejemplos que realmente me gustan. El primero en usar Crisis climática Hay una fuente YEAR El rango de los ejes varía de 1979 a 2025. Cada año, las letras se derriten ligeramente y se encogen un poco. Aquí hay una poderosa declaración ecológica, y cuando apilan los mensajes de texto, realmente puede ver cambios y obtener un efecto 3D bastante sorprendente:

Otra buena opción es Cuenta de bitsuna fuente variable con un eje de peso clásico, que oscila entre 100 y 900. Al cambiar el peso de acuerdo con el índice de capa, obtendrá un efecto en capas que parece un pico que aumenta en el texto:

Aquí hay un ejemplo que podría hacer de su navegador un pequeño entrenamiento. Fuente Kablammo incluir MORF Eje y ajustarlo cambia completamente la forma de cada letra. Así que creo que el eje de animación es interesante (sí, font-variation-settings está animado) y agregue un breve retraso entre las capas como hemos visto antes para que la animación sea más activa y animada.

Posición de retraso

Antes de resumir el Capítulo 2, quiero mostrarle una animación. Por ahora, es posible que haya notado que siempre hay una manera de hacer las cosas, a veces solo una cuestión de encontrar la correcta. Incluso el posicionamiento de las capas hemos sido procesados estáticamente translateZpuede hacer algo diferente.

Si animamos la capa para avanzar a lo largo del eje Z, desde cero hasta toda la altura del texto, y agregamos un retraso igual entre cada texto, terminamos con el mismo efecto 3D visual, solo en movimiento.

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --delay: calc(var(--n) * -3s);

  animation: layer 3s var(--delay) infinite ease-in-out;
}

@keyframes layer {
  from { transform: translateZ(0); }
  to { transform: translateZ(calc(var(--layers-count) * var(--layer-offset))); }
}

Esta es una técnica más avanzada adecuada para animaciones más complejas. Para cada caso de uso, esto no es lo que necesita, pero para algunos efectos se ve realmente genial.

Resumir

Hasta ahora, hemos puesto los efectos de texto en capas en movimiento, cambio y estilos creativos. También vemos que incluso los pequeños cambios pueden tener un gran impacto visual cuando se aplica en las capas.

Pero, hasta ahora, todo lo que hemos hecho es predefinido y autónomo. En el próximo capítulo, agregaremos una capa de interactividad. Literalmente. De simple :hover En transición al uso de JavaScript para rastrear la posición del mouse, aplicaremos transformaciones en tiempo real y desarrollaremos un efecto de aumento totalmente receptivo.