Vsebina
- 1. Ustvarite uvodno besedilo
- 2. Razdelite besedilo
- 3. Dodajte hitrost
- 4. Pokličite akcijo
- 5. Pojdi naprej
- 6. Dodajte končne črke
- Več o tem na Generate London
Uvedba učinkov na besedilo in tipografijo lahko doda povsem novo perspektivo uporabniški izkušnji na spletnem mestu. Toda besedilo je treba brati in če postanete preveč pametni ali pametni z učinkom, lahko premagate njegov namen.
Bodite torej pametni, bodite pametni, vendar se prepričajte, da vaš učinek kinetične tipografije dejansko deluje, tako kot na spletnem mestu Patricka Henga - predstavljen na zgornji sliki. Preberite, če želite izvedeti, kako ...
1. Ustvarite uvodno besedilo
Odprite projektne datoteke in videli boste, da obstajata knjižnici velocity.js in blast.js. Blast razdeli besedilo, medtem ko je hitrost med motorji. Obstajajo tri odmične spremenljivke, zaradi katerih se vsak del besedila premika v različnih intervalih.
skript> var offset1 = 0; var odmik2 = 0; var offset3 = 0; / skripta>
2. Razdelite besedilo
Vsak od besedilnih znakov je s pomočjo eksplozije razdeljen na lasten element razpona. Nato se zgornja plast besedila zamaše in odmik poveča za vsako črko, tako da se animirajo neodvisno.
$ (“H1”). Blast ({ločilo: “znak”}); funkcija anim () {var $ razteza = $ (“# top”). find (‘span’); $ spans.each (function () {offset1 + = 40;
3. Dodajte hitrost
Zdaj knjižnica hitrosti doda gibanje in motnost, tako da se črke pomaknejo navzgor in zbledijo. Vsaka črka se pomakne, trajanje in sprostitev pa se nastavi za vsako črko.
$ (this) .velocity ({translateY: -100, motnost: 1}, {zamuda: odmik1, trajanje: 800, olajšanje: "easyOutBack"}); }); }
4. Pokličite akcijo
Zdaj se pokliče funkcija 'anim', kar sproži začetek animacije. Funkcija 'setTimeout' zdaj osupne drugi blok besedila, ki bo rumen. Spet se sproži z uporabo hitrosti kot v prvem primeru.
anim (); setTimeout (function () {var $ spans = $ (“# middle”). find ('span'); $ spans.each (function () {offset2 + = 40; $ (this) .velocity ({translateY: - 100, motnost: 0,8}, {
5. Pojdi naprej
Zakasnitev, trajanje in sprostitev so nastavljeni tako, da se drugo rumeno besedilo pravilno premika. Nato se zadnji del besedila, ki je oranžen, nadzira v naslednji funkciji 'setTimeout', da to premikanje nekoliko podaljša pred začetkom.
zakasnitev: offset2, trajanje: 800, popuščanje: “easyOutBack”}); }); }, 100); setTimeout (function () {var $ spans = $ (“# bottom”). find (‘span’);
6. Dodajte končne črke
Zdaj so zadnje črke premaknjene na svoje mesto. To daje enak učinek kot spletno mesto Patricka Henga, na katerem se premikajo sloji besedila. Patrick dejansko uporablja WebGL za premikanje besedila, vendar je to bolj preprost način z elementi DOM.
$ spans.each (function () {offset3 + = 40; $ (this) .velocity ({translateY: -100, motnost: 0,8}, {zamuda: offset3, trajanje: 800, popuščanje: “easyOutBack”}); ); }, 150);
Več o tem na Generate London
Richard Rutter ljubi in fascinira tipografijo in je soustanovitelj Fontdeck, pionirske spletne pisave. Richard je samoimenovani evangelist za spletno tipografijo, glavni organizator konferenc o tipografiji Ampersand Clearleft.
Na Generate London 2018 vam bo njegova delavnica pomagala ustvarjati spletna mesta z privlačno, primerno, prepoznavno, izrazno in berljivo spletno tipografijo, ki se prilagodi zaslonom vseh oblik in velikosti. Naučili se boste, kako združiti stoletno obrt z vrhunsko tehnologijo - vključno z variabilnimi pisavami -, da oblikujete in razvijete najboljše izkušnje za svoje bralce.
Čez en dan boste sodelovali v praktičnih aktivnostih, pri čemer boste vsako novo tehniko uporabili na podrobnem vzorčnem spletnem mestu, ki ga boste lahko vzeli nazaj s seboj. To bo popoln vir, na katerega se boste lahko sklicevali v prihodnosti. In če to ne bo dovolj, bo vsak udeleženec odšel z brezplačno elektronsko kopijo Richardove priznane knjige o spletni tipografiji.
Ne zamudite, takoj si priskrbite vozovnico
