Cómo crear sutiles aperturas de texto animado

¿Alguna vez has visto aperturas de texto sutiles y te has preguntado cómo surgieron?

Hay muchos de esos por ahí, y es prácticamente imposible explicar cómo funcionan todos.

Sin embargo, elija un ejemplo y permítame mostrarle cómo recrearlo.

Ya tomé la decisión, y esto es lo que construiremos:

La demo

Es una apertura de texto para una agencia creativa ficticia. Puedes ver los resultados aquí.

Ves el flash, ¿verdad? También puede ver cómo se escalona la animación: en lugar de animar todo el texto a la vez, ¿cada palabra del texto tiene un tiempo diferente?

Te mostraré cómo recrearlos.

Pon una sonrisa. ¡Te va a encantar!

Introducción

A nadie le gusta el marcado feo. De hecho, no escribiremos mucho marcado. Recreemos esta animación.

En primer lugar, toma tu sudadera con capucha (si tienes una) y ponte tu sombrero de desarrollador (debes tener una de esas).

Ahora, déjame guiarte a través del proceso paso a paso. No es difícil, para ser honesto.

1. Presente el marcado simple requerido.

  

    Somos una agencia creativa   

2. Ponga una imagen de fondo decente.

.apertura {
  background-image: url ('https://preview.ibb.co/cBVBf7/fantasy_3146946_1280.jpg')
}

A continuación se muestra el resultado de eso:

Partimos de la nada. ¡Aquí estamos!

El resultado parece extraño, ya que la imagen de fondo se repite.

3. Detenga la repetición y haga que la imagen de fondo sea más bonita.

.apertura {
  altura: 100vh;
  fondo: gradiente lineal (rgba (0,0,0,0.1), rgba (0,0,0,0.9)), url ('https://preview.ibb.co/hkXMDS/fantasy_3146946_1920.jpg') no -repetir 50% 0% / cubierta;
}
Esto se ve abarrotado :(

Si no comprende el código anterior, depende de la premisa de que se pueden agregar múltiples fondos a un elemento a través de CSS. Estos fondos deben estar separados por una coma. En el ejemplo anterior, el degradado lineal representa un fondo y la url (..) el otro. Uno agrega un gradiente lineal, el otro, una imagen.

Echa un vistazo a la ilustración de arriba. Debería tener más sentido ahora.

¿Sigo confundido? Hazme cualquier pregunta en la sección de comentarios a medida que avanzamos.

¡Aquí está el resultado! => La imagen de fondo ahora se superpone con un degradado sutil. Muy bien, ¿eh?

4. Coloque el contenido del texto en el centro.

¡Usa Flexbox!

.apertura {
  ...
  pantalla: flex;
  justify-content: centro;
  alinear elementos: centro;
}
Copié esta imagen de otro artículo mío, en caso de que no sepa cómo funciona Flexbox. Elige la parte necesaria.El texto ahora está perfectamente centrado. ¡Hurra!

5. Justo antes de animar, haz que el texto sea bonito.

.opening-text {
  margen: 0;
  color: rgba (255,255,255,0.6);
  transformación de texto: mayúscula;
  tamaño de fuente: 3.6rem;
  alinear texto: centro;
}
¡Tienes esto!¡Oye! Estamos progresando ¿Luciendo bien?

6. ¡Prepárate para animar!

Si observa el resultado final, notará que cada palabra en la oración está animada en la escena. Necesitamos una forma de separar las palabras en elementos individuales.

Vamos a manejar esto con JavaScript.

En pocas palabras, aquí hay una representación gráfica de lo que queremos hacer.

Necesitamos ajustar cada palabra dentro de un elemento <span>.

Ahora entiendes la tarea en cuestión.

Y aquí está el código para eso. Espero que te sientas cómodo con algunos JavaScript, ya que voy a arrojarte algunos.

const textNode = document.querySelector ('. texto de apertura');
const splitTextArr = textNode.innerText.split ("");
let finalMarkup = "";
splitTextArr.forEach (buildMarkup);


función buildMarkup (texto, índice) {
  dejar spanText;
  (índice === 2)?
  spanText = "" + text + " 
":   spanText = "" + text + "";      return finalMarkup + = spanText; } / ** Sustituya el contenido anterior por el nuevo marcado con elementos span * / textNode.innerHTML = finalMarkup;

No es demasiado para comprender, pero he seguido adelante e ilustrado lo que está sucediendo.

Tiene un poco más de sentido ahora?

NB: Dentro de la función buildMarkup, seguí adelante y agregué una etiqueta
después de la tercera palabra. Esto asegurará que el texto se rompa en lugar de permanecer en una línea.

7. Escribe los fotogramas clave

@keyframes hide {
    de {opacidad: 1; }
    a {opacidad: 0; }
}

@keyframes brillan {
    de {text-shadow: 0 0 14rem blanco; }
    a {text-shadow: 0 0 0 blanco; }
}

Hay dos animaciones diferentes que necesitamos para el efecto final. Uno, la animación oculta, y el otro, la animación brillante.

Si no está familiarizado con el funcionamiento de las animaciones CSS, obtener mi Curso avanzado de CSS es obvio. En pocas palabras, las animaciones se basan principalmente en fotogramas clave.

Dentro de un bloque de fotogramas clave, usted define el cambio en las propiedades de un elemento a lo largo del tiempo.

Ver el código de arriba. Incluso si no conoce bien las animaciones CSS, estoy seguro de que puede tener un poco de sentido.

8. Aplicar las animaciones a los elementos.

.opening-text span {
  opacidad: 0;
  animación:
    ocultar 8s facilidad de entrada infinita,
    brillo 8s facilidad de entrada infinita;
}
¡Aquí estamos!

¿Luciendo bien?

Aquí hay un poco de explicación.

La propiedad CSS text-shadow se usa para crear el efecto flash en el texto. Si no sabe cómo funciona text-shadowworks, eche un vistazo a la referencia de codrops. Aunque he estado escribiendo CSS durante años, también lo busqué para actualizarme.

¡Estamos en esto juntos!

9. Finalmente, compensa las animaciones para obtener un sutil efecto asombroso.

.opening-text span: nth-child (6n) {
   retraso de animación: 900 ms;
}
.opening-text span: nth-child (6n-1) {
   Retraso de animación: 700 ms;
}
.opening-text span: nth-child (6n-3) {
   animación-delay: 600ms;
}
.opening-text span: nth-child (6n-4) {
   animación-delay: 300 ms;
}
.opening-text span: nth-child (6n-5) {
   animación-delay: 0s;
}

Después de ajustar cada palabra en un elemento span, .opening-text ahora contiene seis elementos. Cada uno está dirigido utilizando el selector n-child. Sustituya n = 1 en los selectores anteriores. Te acostumbrarás.

Me volví flojo, pero estoy seguro de que si pasas más tiempo ajustando los valores, tendrás una animación más bonita.

Sí, lo hicimos

¿Te quedaste en alguna parte?

Avísame en los comentarios y estaré encantado de ayudarte.

¿Listo para convertirte en profesional?

He creado una guía de CSS gratuita para que sus habilidades de CSS sean increíbles, de inmediato. Obtenga el libro electrónico gratuito.

Siete secretos CSS que no sabías