Hacer efectos interactivos de la tipografía 3D

Sep 14, 2025

Cómo

[dieciséis]

La tipografía siempre ha jugado una parte importante en el arsenal de herramientas de cualquier diseñador, ya que seleccionan el tipo de letra correcto que mejorará el mensaje y presentará el contexto correcto para lo que se está comunicando. En los últimos ocho años, los diseñadores web han tenido la capacidad de traer Tipografías personalizadas tal como tipografía kinética a su diseño y tienen un control tipográfico similar a los disfrutados por los diseñadores de impresión.

Eche un vistazo a muchos de los sitios que se presentan como galardonado o recibiendo "sitio de los títulos del sitio" y pronto notará que su uso de la tipografía se vuelve central para el diseño, lo que les permite aumentar por encima de su competencia. Esto puede variar desde formularios de letras animadas, movimiento reactivo a las interacciones de los usuarios, al uso audaz de los formularios de tipo que toma el escenario central (mantenga sus archivos de tipografía seguros en almacenamiento en la nube ).

Si desea crear un sitio de llamamiento con cero alboroto, intente un Creador de sitios web también. Y asegúrese de que el rendimiento de su sitio esté optimizado con la parte superior Alojamiento web .

Fuentes 3D: 9 puntas de tipo superior

En este tutorial, el efecto de tipo utilizará las formas de las letras como una máscara a algunas senderos de partículas rápidas y libres que se arremolinarán y se moverán dinámicamente a través de las letras. No solo habrá esta hermosa animación, sino que se renderizará en el Lienzo html5 Elemento, esto se transformará en 3D para girar hacia el mouse a medida que se mueve alrededor de la pantalla. Esto es perfecto para los encabezados del sitio o simplemente cuando necesita llamar la atención del usuario para una llamada a la acción.

Descarga los archivos tutoriales aquí.

01. iniciar el proceso

Abra la carpeta 'Inicio' de los archivos del proyecto en su Código IDE. El proyecto va a comenzar creando la clase de objeto de partículas. Esto se utilizará para crear las imágenes que fluyen dentro del texto en el proyecto. Abra el archivo 'Sketch.js' y agregue la siguiente variable para comenzar a crear la partícula base.

 Partícula de la función () {
  esto.pos = createvector (aleatorio (ancho), aleatorio ((altura - 100));
  este.Vel = createvector (0, 0);
  esto.acc = createvector (0, 0);
  esta.maxspeed = maxspeed;
  Esto.Prevales = esto.Pos.Copy ();

02. Actualizar la partícula

Para mover la partícula, se ejecutará una función de actualización cada cuadro, esto funcionará en la velocidad de la partícula y la aceleración a la velocidad. La velocidad eventualmente se limitará por una variable global que se agregará más adelante. La velocidad se agrega a la posición de la partícula individual. Al crear una partícula, se crearán varios miles en la pantalla a la vez.

 esta.Update = Función () {
  esta.vel.add (esto.acc);
  esta.vel.limit (esta.maxspeed);
  esto.Pos.add (esta.vel);
  esto.acc.mult (0);
  }

03. Ir con el flujo.

Para dar a las partículas su movimiento que fluye, se seguirá un campo de flujo generado por el ruido. La función creada aquí permite que se pase el vector de flujo y luego se seguirá, de ahí el nombre de esta función. La fuerza de la dirección del vector se aplicará a la partícula.

 Esto.Siguiente = Función (vectores) {
  var x = piso (esto.pos.x / scl);
  var y = piso (esto.pos.y / scl);
  var index = x + y * cols;
  var forzar = vectores [índice];
  esto.ApplyForce (Fuerza);
  }

04. Sigue pero no demasiado cerca

Para evitar que todas las partículas se acumulen, lo que puede suceder fácilmente con este tipo de movimiento, las partículas tendrán una cantidad muy pequeña de aleatoriedad agregada a su posición. Esto causará una ligera cantidad de dispersión.

 Esta función (vectores) (vectores) {
  esto.pos.x + = aleatorio (-0.9, 0.9);
  esto.pos.y + = aleatorio (-0.9, 0.9);
  }
  esta.applyforce = Función (Fuerza) {
  esto.acc.add (fuerza);
  }

05. Muestra la partícula

La función Show aquí muestra la partícula. Lo primero que hace es agregar un golpe de un píxel de un color gris claro para crear la línea. La línea se extrae de su posición actual a su última posición en el marco anterior. La posición anterior se almacena para la próxima vez a través del bucle.

 Esto.show = Función () {
  accidente cerebrovascular (180);
  Peso de mano (1);
  línea (esto.pos.x, esto.pos.y, esto.prevos.x, esto.prevos.y);
  esto.UpdatePrev ();
  }
  esta.updateprev = Función () {
  esto.prevos.x = esto.pos.x;
  esto.prevos.y = esto.Pos.y;
  }

06. envolver alrededor

La función de los bordes funciona si la partícula alcanza el borde de la pantalla y, de ser así, lo envuelve alrededor para venir en el lado opuesto. Esta sección trata con la posición X, por lo que se detecta si es mayor que el ancho de la pantalla y luego enviándolo al borde izquierdo y viceversa.

 esto.edges = Función () {
  if (este.pos.x & gt; ancho) {
  esto.pos.x = 0;
  esto.UpdatePrev ();
  }
  if (esto.pos.x & lt; 0) {
  este.pos.x = ancho;
  esto.UpdatePrev ();
  }

07. Delicia de Wrapper

Este código es el resto de la detección de borde y detecta la partícula en el eje Y para la parte superior e inferior de la pantalla. Los corchetes aquí envuelven toda la clase de partículas. Esto significa que usando esta clase se pueden crear muchas partículas.

 si (esto.pos.y & gt; altura) {
  esto.pos.y = 0;
  esto.UpdatePrev ();
  }
  if (esto.pos.y & lt; 0) {
  esto.pos.y = altura;
  esto.UpdatePrev ();
  }
  }
}

08. Hacer muchas partículas.

Ahora, como se crea la partícula, es hora de pensar en hacer muchas partículas. Para hacer esto, todo nuestro código puede ir por encima de la clase de función de partículas. Aquí se declaran varias variables globales para permitir que el sistema se ejecute. Se les llamará en varias ocasiones durante el código, para que se puedan explorar.

 var inc = 0.1;
var scl = 100, zoff = 0;
var cols, filas, movimiento = 0;
variculas var = [];
Var Flowfield;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, curry = 0, TargetX = 0, Targety = 0;

09. Establénelo todo

La función de configuración, declarada aquí, establece cómo se verá la pantalla al inicio. La primera detección que se está realizando es ver cuál es el ancho de la pantalla. Si es relativamente grande, se carga una imagen grande, se crea el lienzo y se escala a través de CSS para que se ajuste a la pantalla.

 Configuración de la función () {
  if (Windowswidth & gt; 1200) {
  img = loadImage ("activos / studio.png");
  var lienzo = createcanvas (1920, 630);
  maxspeed = 10.5;
  }

10. Otras pantallas

El resto de la instrucción IF comprueba las diferentes resoluciones de pantalla y carga una imagen que sea más apropiada para ese tamaño de pantalla. De manera similar, se crean elementos de lona de diferentes tamaños. Esto es principalmente para detener un dispositivo móvil con más píxeles de lo que tiene que.

 De lo contrario, si (WindowWidth & GT; 900) {
  img = loadImage ("activos / estudio-tablet-wide.png");
  var lienzo = createcanvas (1200, 394);
  scl = 60;
  maxspeed = 7;
  } demás {
  img = loadImage ("Activos / Studio-Tablet-Tall.PNG");
  var lienzo = createcanvas (700, 230);
  scl = 40;
  maxspeed = 5;
  }

11. Hacer una cuadrícula

Una vez que el tamaño de la pantalla se elabore, el lienzo se coloca dentro de la etiqueta DIV del encabezado en la página index.html. Se elabora una serie de columnas y filas según el ancho y la altura; Es un poco como una cuadrícula invisible. Finalmente, se establece una matriz para el campo de flujo.

 Canvas.Parent ('encabezado');
cols = piso (ancho / scl);
filas = piso (altura / scl);
Flowfield = nueva matriz (cols);

12. Hacer partículas

El número de partículas se configura según el ancho de la pantalla, si la pantalla es de 1920 píxeles de ancho, se crearán 2500 partículas y se mueve hacia abajo desde allí. A For Loop crea las nuevas partículas. El color de fondo de la pantalla está configurado en blanco casi completo.

 var numpartics = math.floor ((2500/1920) * Ancho);
  para (var i = 0; i & lt; numparticles; i ++) {
  partículas [I] = nueva partícula ();
  }
  fondo (245);
}

13. Dibuja la pantalla.

Los resultados de todos los cálculos se dibujan en la pantalla cada cuadro en la función de sorteo. En primer lugar, un rectángulo gris claro con una opacidad muy baja llena la pantalla para desvanecerse lo que se ha dibujado anteriormente. Después de que se dibuje esto, el relleno se apaga, ya que las partículas estarán formadas por trazos que no se llenan.

 Dibujo de función () {
  nastroke ();
  Rellenar (245, 10);
  Rect (0, 0, Ancho, Altura);
  sin relleno();
  var yoff = 0;

14. Crea un efecto de flujo.

Para obtener el efecto de flujo, hay dos 'para' los bucles que se mueven a través de las filas y las columnas para actualizar los valores de ruido. Luego, estos se cambian en ángulos del valor de ruido listo para actualizar las partículas para cada una de las posiciones en la pantalla.

 para (var y = 0; y & lt; filas; y ++) {
  var xoff = 0;
  para (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  var ángulo = ruido (xoff, yoff, zoff) * two_pi * 4;
  var v = p5.vector.fromangle (ángulo);

15. Actualizar la matriz

La matriz de flujo se actualiza con el ángulo y se incrementan los valores para que aumente el desplazamiento de cada posición cada vez que sube. Esto podría parecer complicado, pero realmente solo crea un movimiento de flujo aleatorio para que las partículas se sigan en la pantalla.

 v.setmag (1);
  Flowfield [índice] = v;
  xoff + = inc;
  }
  Yoff + = inc;
  Zoff + = 0.001;
  }

16. Actualizar las partículas.

Ahora las partículas están en marcha en su matriz. Se dice que cada partícula individual siga el campo de flujo, para actualizar, verifique los bordes de la pantalla, dispersos ligeramente y finalmente se dibujen en la pantalla usando la función Mostrar. Guarde el archivo y pruebe el 'index.html' para ver las partículas que se mueven.

 para (var i = 0; i & lt; parts.length; i ++) {
  Partículas [I] .Follow (Flowfield);
  partículas [I] .Update ();
  partículas [I] .edges ();
  partículas [I] .scatter ();
  partículas [i] .show ();
  }
}

17. Añadir el texto.

El texto es una máscara que se coloca sobre la parte superior. Para hacer esto, la imagen correcta se coloca sobre la parte superior de las partículas. Agregue este código antes de la abrazadera de cierre de la función de dibujo. Guarde y revise el navegador para ver el efecto que trabaja con el texto ahora.

 Imagen (IMG, 0, 0);

18. Detectar la posición del mouse.

Se hace referencia a la posición del mouse y los valores X e Y se asignan en ángulos de grado que se pueden mover. En el eje Y, esto será de -25 a 25 y viceversa para el eje x. El código restante debe colocarse después de que se agregó el último código, antes del final de la función de sorteo.

 Targety = Math.round (Mapa (Mapa (Mousex, 0, Ancho, -25, 25));
targetx = math.round (mapa (mouse, 0, altura, 25, -25));

19. Facilidad en su lugar

La posición objetivo ahora se le da un poco de facilidad para que los grados alcancen lentamente su objetivo. Esto se crea utilizando un algoritmo de aliviación clásica de quitar la posición actual desde el destino y multiplicar por un número bajo.

 var vx = (TargetX - Currx) * 0.05;
var vy = (apartado - curry) * 0.05;
calcx + = vx;
Calcy + = VY;

20. Escribe el CSS.

La variable 't' aquí toma los valores calculados y los coloca en una cadena CSS utilizando los valores de transformación de ROTATEX y ROTATEY. La posición actual se calcula a partir de la posición. El lienzo se gira actualmente.

 T = 'ROTATEX (' + CALCX + 'DEG) ROTATEY (' + Calcy + 'deg)';
currx = calcx;
curry = calcy;

21. Terminar

Ahora, el CSS se aplica al elemento de lienzo en este código. Guarde la página y previsualización de esto en el navegador. Ahora el mouse actualiza completamente la rotación del lienzo para que se mueva mientras el mouse se mueva. Por supuesto, todas las partículas en ese espacio se mueven con él en la pantalla.

 lienzo.style.webkittransform = t;
lienzo.style.mstransform = t;
lienzo.style.transform = t;

Este artículo se publicó originalmente en Creative Web Design Magazine Web Designer. Comprar Número 271 o suscribir .

Artículos relacionados:

70 mejores fuentes gratis para diseñadores
6 pasos a la experiencia de lectura en línea perfecta
La herramienta gratuita en línea le muestra lo que sus fuentes pueden hacer

Hacer efectos interactivos de la tipografía 3D

01. iniciar el proceso

02. Actualizar la partícula

03. Ir con el flujo.

04. Sigue pero no demasiado cerca

05. Muestra la partícula

06. envolver alrededor

07. Delicia de Wrapper

08. Hacer muchas partículas.

09. Establénelo todo

10. Otras pantallas

11. Hacer una cuadrícula

12. Hacer partículas

13. Dibuja la pantalla.

14. Crea un efecto de flujo.

15. Actualizar la matriz

16. Actualizar las partículas.

17. Añadir el texto.

18. Detectar la posición del mouse.

19. Facilidad en su lugar

20. Escribe el CSS.

21. Terminar

Cómo - Artículos más populares

Cinema 4D Tutoriales: 13 de los mejores

Construye un chatbot AI-Powered

Diseñador de afinidad: Cómo usar la persona de exportación

Cómo escanear a una persona en menos de cinco minutos

Construye una página de destino de pantalla dividida animada

Tres pasos para un cielo nocturno brillante en acuarela

Crea un diseño de logotipo perfectamente geométrico en Illustrator

Cómo preparar gráficos ilustradores para después de los efectos

Categorías