Crea un efecto de texto tambaleante con JavaScript

Sep 12, 2025

Cómo

A screenshot from Patrick Heng's website including moving typography

[dieciséis]

Introducir efectos al texto y la tipografía puede agregar una nueva perspectiva a la experiencia de usuario en un sitio web. Pero el texto debe ser leído, y obtener demasiado inteligente o inteligente con un efecto puede derrotar el propósito de ello.

Así que sea inteligente, sea inteligente, pero asegúrate de que tu tipografía kinética efecto en realidad funciona, al igual que lo hace en Sitio web de Patrick Heng - Presentado en la imagen de arriba. Siga leyendo para averiguar cómo ...

1. Crea el texto de introducción.

Abre el Archivos de proyecto Y verás que está la biblioteca Velocity.js y Blast.js. Blast Splits Text Up, mientras que la velocidad es un motor Tween. Hay tres variables de compensación para hacer que cada pieza de texto se mueva a diferentes intervalos.

 & lt; script & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Dividir el texto.

Usando la explosión, cada uno de los caracteres de texto se divide en su propio elemento de intervalo. Luego, la capa superior de texto está en bucle y el desplazamiento se incrementa para cada letra para que se animen de forma independiente.

 $ ("H1"). Blast ({
  Delimitador: "Carácter"
});
Función anim () {
  var $ spans = $ ("# top"). Buscar ('span');
  $ spans.ach (función () {
  offset1 + = 40;

3. Añadir velocidad

Ahora, la biblioteca de velocidad agrega el movimiento y la opacidad para que las letras se muevan hacia arriba y se desvanecen. Cada letra se ofrezca, y la duración y la flexibilización se establecen para cada una de las letras.

 $ (esto) .velocity ({
  traducido: -100,
  Opacidad: 1
  }, {
  Retraso: offset1,
  Duración: 800,
  Facilitando: "Fifloutback"
  });
  });
}

4. Llame a la acción.

Ahora se llama la función 'Anim' y esto desencadena la animación para comenzar. Una función de 'Settimeout' ahora se tambalea el segundo bloque de texto que será amarillo. Una vez más, se activa utilizando la velocidad como en el primer ejemplo.

 Anim ();
Settimeout (función () {
  var $ spans = $ ("# medio"). Encuentra ('span');
  $ spans.ach (función () {
  offset2 + = 40;
  $ (esto) .velocity ({
  traducido: -100,
  Opacidad: 0.8
  }, {

5. seguir adelante

El retraso, la duración y la flexibilización se establecen para que el segundo texto amarillo se mueva correctamente. Luego, la última pieza de texto que es la naranja se controla en la siguiente función 'Settimeout' para retrasar este movimiento un poco más tiempo antes de comenzar.

 Retraso: offset2,
  Duración: 800,
  Facilitando: "Fifloutback"
  });
  });
}, 100);
Settimeout (función () {
  var $ spans = $ ("# inferior"). Encuentra ('span');

6. Añadir letras finales

Ahora las letras finales se mueven en su lugar. Esto da el mismo efecto que El sitio de Patrick Heng , que tiene capas de texto en movimiento. Patrick en realidad usa Webgl para mover el texto, pero esto es una forma más sencilla con los elementos DOM.

 $ spans.ach (función () {
  offset3 + = 40;
  $ (esto) .velocity ({
  traducido: -100,
  Opacidad: 0.8
  }, {
  Retraso: offset3,
  Duración: 800,
  Facilitando: "Fifloutback"
  });
  });
}, 150);

Aprende más en Generar Londres

Richard Rutter tiene un amor y fascinación por la tipografía y co-fundada. Fontdeck , un servicio de fuentes web pionero. Como un autogelista de tipografía web autonombrado, Richard es el organizador principal de Clearleft's Ampersand Conferencias de tipografía web.

En Generar Londres 2018, su taller le ayudará a crear sitios web con tipografía web atractiva, apropiada, distintiva, expresiva y legible, que se adapte a las pantallas de todas las formas y tamaños. Aprenderá cómo combinar la embarcación de siglos de siglos con tecnología de vanguardia, incluidas las fuentes variables, para diseñar y desarrollar las mejores experiencias para sus lectores.

En el transcurso de un día, participará en actividades prácticas, aplicando cada nueva técnica a un sitio de ejemplo detallado que puede recuperar con usted. Esto formará el recurso perfecto para que se refiera en el futuro. Y si eso no es suficiente, todos los asistentes se alejarán con una copia electrónica gratuita de la aclamada de Richard. Libro de tipografía web .

No te lo pierdas, ahora consigue tu boleto.

Artículos relacionados:

JavaScript perfecto en 1,000 proyectos.
Consejos de tipo digital Pro para diseñadores gráficos
7 grandes recursos de tipo web

Crea un efecto de texto tambaleante con JavaScript

1. Crea el texto de introducción.

2. Dividir el texto.

3. Añadir velocidad

4. Llame a la acción.

5. seguir adelante

6. Añadir letras finales

Aprende más en Generar Londres

Cómo - Artículos más populares

PORREREF: Cómo usar la herramienta de referencia de la imagen

Comience con la plataforma de animación de Greensock

Crea un efecto de texto de neón brillante

Recrear un clásico manga

Cómo dibujar rápidamente las manos

Construye una escena de ciencia ficción 3D compleja en Blender

Crea conjuntos de iconos de productos en ilustrador

Crea ilustraciones simples para la web

Categorías