Creați un efect de text wobbly cu JavaScript

Feb 9, 2026

să

A screenshot from Patrick Heng's website including moving typography

Introducerea efectelor asupra textului și tipografiei pot adăuga o perspectivă cu totul nouă experiența utilizatorului pe un site web. Dar textul va fi citit și obținerea prea inteligentă sau inteligentă cu un efect poate învinge scopul acesteia.

Așa că fii inteligent, fii inteligent, dar asigurați-vă că tu Tipografie cinetică efect funcționează de fapt, la fel ca și cum o face Site-ul lui Patrick Heng - prezentate în imaginea de mai sus. Citiți mai departe pentru a afla cum ...

1. Creați textul intro

Deschide Fișiere de proiect. Și veți vedea că există biblioteca Velocity.js și Blast.js. Blast Splits Text în sus, în timp ce viteza este un motor Tween. Există trei variabile offset pentru a face fiecare piesă de text să se miște la diferite intervale.

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

2. Împărțiți textul

Folosind Blast, fiecare dintre caracterele de text sunt împărțite în propriul element de span. Apoi stratul superior de text este buclat și decalajul este crescut pentru fiecare literă, astfel încât acestea să fie animate independent.

 $ ("H1"). Blast ({
  DELIMITER: "Caracter"
});
Funcție anim () {
  vary $ spans = $ ("# # top"). Găsiți ("span");
  $ spans.each (funcția () {
  offset1 + = 40;

3. Adăugați viteza

Acum, biblioteca de viteză adaugă mișcarea și opacitatea, astfel încât literele să se miște și să se estompeze. Fiecare literă este decalată, iar durata și relaxarea sunt stabilite pentru fiecare dintre litere.

 $ (acest) .velocity ({
  Translatey: -100,
  Opacitate: 1.
  }, {
  întârzierea: Offset1,
  Durata: 800,
  Realizarea: "SOINTOUTBACK"
  });
  });
}

4. Apelați acțiunea

Acum funcția "Anim" este numită și acest lucru declanșează animația să înceapă. O funcție "settimeout" joacă acum al doilea bloc de text care va fi galben. Din nou, este declanșată folosind viteza ca în primul exemplu.

 Anim ();
SetTimeout (funcția () {
  vary $ spans = $ ("# # medie"). Găsiți ("span");
  $ spans.each (funcția () {
  Offset2 + = 40;
  $ (this) .velocity ({{
  Translatey: -100,
  Opacitate: 0.8.
  }, {

5. Deplasați-vă

Întârzierea, durata și relaxarea sunt stabilite astfel încât cel de-al doilea text galben să se mute corect. Apoi, ultima bucată de text care este portocalie este controlată în următoarea funcție "settimeout" pentru a întârzia acest lucru se mișcă puțin mai mult înainte de a începe.

 Întârzie: Offset2,
  Durata: 800,
  Realizarea: "SOINTOUTBACK"
  });
  });
}, 100);
SetTimeout (funcția () {
  vary $ spans = $ ("# fund"). Găsiți ("span");

6. Adăugați scrisori finale

Acum, literele finale sunt mutate în loc. Acest lucru oferă același efect ca Site-ul lui Patrick Heng , care are straturi de mișcare a textului. Patrick folosește de fapt WebGL pentru a muta textul, dar acesta este un mod mai simplu cu elemente DOM.

 $ spans.each (funcția () {
  Offset3 + = 40;
  $ (this) .velocity ({{
  Translatey: -100,
  Opacitate: 0.8.
  }, {
  Întârzieri: Offset3,
  Durata: 800,
  Realizarea: "SOINTOUTBACK"
  });
  });
}, 150);

Aflați mai multe la Generate Londra

Generate graphic — Vezi Richard Rutter, Sarah Parrmenter și Bruce Lawson și mai mult vorbesc la Generate London 2018

Richard Rutter are o dragoste și o fascinație pentru tipografie și co-fondată FontDeck. , un serviciu de pionierat Web Font. Ca o tipografie web auto-numită Evanghelist, Richard este principalul organizator al lui Clearleft Ampersand. Conferințe de tipografie web.

La Generate Londra 2018, atelierul său vă va ajuta să creați site-uri web cu o tipografie web angajată, adecvată, distinctivă, expresivă și citibilă, care se adaptează ecranelor tuturor formelor și dimensiunilor. Veți învăța cum să combinați ambarcațiunile vechi de secole cu tehnologie de vârf - inclusiv fonturi variabile - pentru a proiecta și dezvolta cele mai bune experiențe pentru cititorii dvs.

Pe parcursul unei zile, veți participa la activități practice, aplicând fiecare nouă tehnică unui site detaliat de exemplu pe care îl puteți lua înapoi cu dvs. Aceasta va forma resursa perfectă pentru a vă referi la viitor. Și dacă acest lucru nu este suficient, fiecare participant va pleca cu o copie electronică gratuită a apreciatorii lui Richard Cartea de tipografie web .

Nu ratați, obțineți biletul acum

Articole similare:

Perfect JavaScript în 1.000 de proiecte
Pro Tip digital Sfaturi pentru designeri grafici
7 Resurse de tip web mare

Creați un efect de text wobbly cu JavaScript

1. Creați textul intro

2. Împărțiți textul

3. Adăugați viteza

4. Apelați acțiunea

5. Deplasați-vă

6. Adăugați scrisori finale

Aflați mai multe la Generate Londra

să - Cele mai populare articole

Cum se adaugă fonturi în Photoshop

Procreate Tutorial: Cum să pictezi ca vechii maeștri

Cum să creați caractere de desene animate blande

Cum se adaugă textura la pasteluri cu primeri

Cum să sculptați digital în ZBRUSHCORE

Cum să pictezi fiare fantezie

Vopsea un portret de stil în Photoshop CC

Faceți o dublă expunere în Photoshop

Categorii