Creați un efect de text oscilant cu JavaScript

O captură de ecran de la Patrick Heng

Introducerea efectelor în text și tipografie poate adăuga o perspectivă complet nouă experiența utilizatorului pe un site web. Dar textul trebuie citit și a deveni prea inteligent sau inteligent cu un efect poate învinge scopul acestuia.

Așadar, fii inteligent, fii inteligent, dar asigură-te că tipografia cinetică efectul funcționează de fapt, la fel cum se întâmplă Site-ul Patrick Heng - prezentat în imaginea de mai sus. Citiți mai departe pentru a afla cum ...

1. Creați textul introductiv

Deschide fișiere de proiect și veți vedea că există biblioteca velocity.js și blast.js. Blast împarte textul în sus, în timp ce viteza este un motor intermitent. Există trei variabile de compensare care fac ca fiecare bucată de text să se miște la intervale diferite.



cum să atragi oamenii în mișcare
var offset1 = 0; var offset2 = 0; var offset3 = 0;

2. Împarte textul

Folosind blast, fiecare dintre caracterele textului este împărțit în propriul element de span. Apoi, stratul superior al textului este realizat în buclă și compensarea este mărită pentru fiecare literă, astfel încât acestea să se animeze independent.

$(“h1”).blast({ delimiter: “character” }); function anim() { var $spans = $(“#top”).find(‘span’); $spans.each(function() { offset1 += 40;

3. Adăugați viteza

Acum biblioteca de viteze adaugă mișcarea și opacitatea, astfel încât literele să se deplaseze în sus și să se estompeze. Fiecare literă este compensată, iar durata și relaxarea sunt setate pentru fiecare dintre litere.

$(this).velocity({ translateY: -100, opacity: 1 }, { delay: offset1, duration: 800, easing: “easeOutBack” }); }); }

4. Apelați acțiunea

Acum se apelează funcția „anim” și aceasta declanșează animația pentru a începe. O funcție „setTimeout” acum schimbă al doilea bloc de text care va fi galben. Din nou, este declanșat folosind viteza ca în primul exemplu.

anim(); setTimeout(function() { var $spans = $(“#middle”).find(‘span’); $spans.each(function() { offset2 += 40; $(this).velocity({ translateY: -100, opacity: 0.8 }, {

5. Mergeți mai departe

Întârzierea, durata și relaxarea sunt setate astfel încât al doilea text galben să se miște corect. Apoi, ultima bucată de text care este portocalie este controlată în următoarea funcție „setTimeout” pentru a întârzia această mișcare puțin mai mult înainte de a începe.

delay: offset2, duration: 800, easing: “easeOutBack” }); }); }, 100); setTimeout(function() { var $spans = $(“#bottom”).find(‘span’);

6. Adăugați literele finale

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

$spans.each(function() { offset3 += 40; $(this).velocity({ translateY: -100, opacity: 0.8 }, { delay: offset3, duration: 800, easing: “easeOutBack” }); }); }, 150);

Aflați mai multe la Generate London

Generați grafică

Vezi Richard Rutter, Sarah Parmenter și Bruce Lawson și mai multe discuții la Generate London 2018

Richard Rutter are o dragoste și o fascinație pentru tipografie și este cofondator Fontdeck , un serviciu de fonturi web pionierat. În calitate de evanghelist auto-numit tipografie web, Richard este organizatorul șef al Clearleft’s Ampersand conferințe de tipografie web.

La Generate London 2018, atelierul său vă va ajuta să creați site-uri web cu o tipografie web captivantă, adecvată, distinctivă, expresivă și lizibilă, care se adaptează pentru ecrane de toate formele și dimensiunile. Veți învăța cum să combinați ambarcațiuni vechi de secole cu tehnologie de ultimă oră - 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ă pe un exemplu de site detaliat pe care îl puteți lua înapoi cu dvs. Aceasta va constitui resursa perfectă la care vă puteți referi în viitor. Și dacă nu este suficient, fiecare participant va pleca cu o copie electronică gratuită a aclamatului lui Richard Carte de tipografie web .

cum să curățați pielea în Photoshop

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

Articole similare: