Innhold
- 1. Lag introteksten
- 2. Del teksten
- 3. Legg til hastighet
- 4. Ring til handlingen
- 5. Gå videre
- 6. Legg til siste bokstaver
- Lær mer på Generate London
Å introdusere effekter til tekst og typografi kan legge til et helt nytt perspektiv til brukeropplevelsen på et nettsted. Men tekst skal leses, og å bli for smart eller smart med en effekt kan beseire formålet med den.
Så vær smart, vær smart, men sørg for at din kinetiske typografieffekt faktisk fungerer, akkurat som den gjør på Patrick Hengs nettsted - omtalt i bildet ovenfor. Les videre for å finne ut hvordan ...
1. Lag introteksten
Åpne prosjektfilene, så ser du at det er biblioteket velocity.js og blast.js. Blast deler tekst opp, mens hastighet er en tween-motor. Det er tre forskyvningsvariabler som gjør at hvert stykke tekst beveger seg med forskjellige intervaller.
skript> var offset1 = 0; var offset2 = 0; var offset3 = 0; / skript>
2. Del teksten
Ved å bruke eksplosjon blir hver av teksttegnene delt inn i sitt eget spennelement. Deretter sløyfes det øverste laget med tekst, og forskyvningen økes for hver bokstav slik at de animeres uavhengig.
$ (“H1”). Blast ({skilletegn: “karakter”}); funksjon anim () {var $ spans = $ (“# top”). finn (‘span '); $ spans.each (funksjon () {offset1 + = 40;
3. Legg til hastighet
Nå tilføyer hastighetsbiblioteket bevegelse og opasitet slik at bokstavene beveger seg opp og falmer inn. Hver bokstav blir forskjøvet, og varigheten og lettelsen er angitt for hver av bokstavene.
$ (dette) .velocity ({translateY: -100, opacity: 1}, {delay: offset1, duration: 800, easing: “easeOutBack”}); }); }
4. Ring til handlingen
Nå kalles 'anim' -funksjonen, og dette utløser animasjonen til å begynne. En 'setTimeout' -funksjon er nå den andre tekstblokken som blir gul. Igjen utløses den ved hjelp av hastighet som i det første eksemplet.
anim (); setTimeout (function () {var $ spans = $ (“# middle”). find ('span'); $ spans.each (function () {offset2 + = 40; $ (this) .velocity ({translateY: - 100, opasitet: 0,8}, {
5. Gå videre
Forsinkelsen, varigheten og lettelsen er satt slik at den andre gule teksten beveger seg riktig. Deretter styres det siste stykket tekst som er oransje i neste 'setTimeout' -funksjon for å utsette denne bevegelsen litt lenger før du starter.
forsinkelse: offset2, varighet: 800, lettelse: “easeOutBack”}); }); }, 100); setTimeout (funksjon () {var $ spenn = $ (“# nederst”). finn (‘span ');
6. Legg til siste bokstaver
Nå flyttes de siste bokstavene på plass. Dette gir den samme effekten som Patrick Hengs nettsted, som har lag med tekst som beveger seg. Patrick bruker faktisk WebGL til å flytte teksten, men dette er en enklere måte med DOM-elementer.
$ spans.each (function () {offset3 + = 40; $ (this) .velocity ({translateY: -100, opacity: 0.8}, {delay: offset3, duration: 800, easing: “easeOutBack”});} ); }, 150);
Lær mer på Generate London
Richard Rutter har en kjærlighet og fascinasjon for typografi og var med å grunnlegge Fontdeck, en banebrytende nettfontjeneste. Som en selvutnevnt evangelist for webtypografi er Richard sjefarrangør av Clearleft's Ampersand webtypografikonferanser.
På Generate London 2018 vil workshopen hans hjelpe deg med å lage nettsteder med engasjerende, passende, særegne, uttrykksfulle og lesbare nettypografi, som tilpasser seg skjermer i alle former og størrelser. Du lærer hvordan du kan kombinere århundrer gammelt håndverk med banebrytende teknologi - inkludert variable skrifttyper - for å designe og utvikle de beste opplevelsene for leserne dine.
I løpet av en dag vil du delta i praktiske aktiviteter ved å bruke hver nye teknikk på et detaljert eksempelside som du kan ta med deg. Dette vil utgjøre den perfekte ressursen du kan referere til i fremtiden. Og hvis det ikke er nok, vil alle deltakerne gå bort med en gratis elektronisk kopi av Richards anerkjente Web Typography-bok.
Ikke gå glipp av det, få billetten din nå
