Lag en wobbly tekst-effekt med JavaScript

Sep 14, 2025

hvordan

A screenshot from Patrick Heng's website including moving typography

[1. 3]

Introduksjon av effekter på tekst og typografi kan legge til et helt nytt perspektiv på Brukererfaring på et nettsted. Men teksten skal leses, og å bli for smart eller smart med en effekt kan beseire formålet med det.

Så vær smart, vær smart, men sørg for at din kinetisk typografi effekten fungerer faktisk, akkurat som den gjør på Patrick Hengs nettside - Utvalgt i bildet ovenfor. Les videre for å finne ut hvordan ...

1. Lag intro-teksten

Åpne Prosjektfiler Og du vil se at det er velocity.js og blast.js biblioteket. Blast splitter tekst opp, mens hastighet er en tween motor. Det er tre offset variabler for å gjøre hvert stykke tekst beveger seg i forskjellige intervaller.

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

2. Split teksten

Ved hjelp av Blast, er hver av tekstkarakterene delt inn i sitt eget spanelement. Deretter løfter det øverste laget av tekst gjennom og forskyvningen økes for hvert brev, slik at de animerer uavhengig.

 $ ("H1"). Blast ({
  Avgrensning: "karakter"
});
Funksjon Anim () {
  Var $ spans = $ ("# topp"). Finn ('span');
  $ spans.each (funksjon () {
  offset1 + = 40;

3. Legg til hastighet

Nå legger hastighetsbiblioteket til bevegelsen og opasiteten slik at bokstavene beveger seg opp og falmer inn. Hvert brev er kompensert, og varigheten og lettet er satt for hver av bokstavene.

 $ (dette) .Velocity ({
  Translatey: -100,
  Opacity: 1.
  }, {
  Forsinkelse: Offset1,
  Varighet: 800,
  Lette: "Easeoutback"
  });
  });
}

4. Ring til handlingen

Nå kalles 'Anim' -funksjonen, og dette utløser animasjonen til å begynne. En "SetiPout" -funksjon stiller nå den andre blokken med tekst som vil være gul. Igjen, det utløses ved hjelp av hastighet som i det første eksempelet.

 anim ();
Settoptidout (funksjon () {
  Var $ spans = $ ("# midt"). Finn ('span');
  $ spans.each (funksjon () {
  offset2 + = 40;
  $ (dette) .Velocity ({
  Translatey: -100,
  Opacity: 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 kontrolleres i den neste funksjonen "Setimeout" for å forsinke dette som beveger seg litt lenger før du starter.

 Forsinkelse: Offset2,
  Varighet: 800,
  Lette: "Easeoutback"
  });
  });
}, 100);
Settoptidout (funksjon () {
  Var $ spans = $ ("# bunn"). Finn ('span');

6. Legg til sluttbrev

Nå blir de endelige bokstavene flyttet på plass. Dette gir samme effekt som Patrick Hengs nettsted , som har lag av tekst som beveger seg. Patrick bruker faktisk WebGL til å flytte teksten, men dette er en enklere måte med Dom-elementer.

 $ spans.each (funksjon () {
  offset3 + = 40;
  $ (dette) .Velocity ({
  Translatey: -100,
  Opacity: 0.8.
  }, {
  Forsinkelse: Offset3,
  Varighet: 800,
  Lette: "Easeoutback"
  });
  });
}, 150);

Lær mer på Generate London

Generate graphic — Se Richard Rutter, Sarah Parmentorer og Bruce Lawson, og mer Snakk på Generere London 2018

Richard Rutter har en kjærlighet og fascinasjon for typografi og medgrunnlag Fontdeck. , en banebrytende nettfondtjeneste. Som en selvutnevnt webtypografi Evangelist er Richard Chief Organizer of Clearleft's Ampersand Web typografi konferanser.

På Generate London 2018 vil hans verksted hjelpe deg med å skape nettsteder med engasjerende, hensiktsmessig, særegent, uttrykksfulle og lesbare webtypografi, som tilpasser seg for skjermer av alle former og størrelser. Du vil lære å kombinere århundre-gammelt håndverk med banebrytende teknologi - inkludert variable fonter - for å designe og utvikle de beste opplevelsene for leserne dine.

I løpet av en dag vil du delta i hands-on aktiviteter, bruke hver ny teknikk til et detaljert eksempel som du kan ta med deg. Dette vil danne den perfekte ressursen for at du skal henvise til i fremtiden. Og hvis det ikke er nok, vil hver deltaker gå bort med en gratis elektronisk kopi av Richards anerkjente Web Typography Book. .

Ikke gå glipp av, få din billett nå

Relaterte artikler:

Perfekt JavaScript i 1000 prosjekter
PRO Digital type tips for grafiske designere
7 Great Web Type Resources

Lag en wobbly tekst-effekt med JavaScript

1. Lag intro-teksten

2. Split teksten

3. Legg til hastighet

4. Ring til handlingen

5. Gå videre

6. Legg til sluttbrev

Lær mer på Generate London

hvordan - Mest populære artikler

Gjennomfør gratis og raske brukertest med brukerlook

Kom i gang med Greensock animasjonsplattform

Hvordan tegne en stor katt med pasteller

Hold perfekt versjonskontroll med abstrakt

Bygg ditt eget WebGl Physics-spill

3D Tekstveiledning for grafiske designere

Lag tilpassede børster i Clip Studio Paint

Lag en Hi-Fidelity Prototype i Atomic

Kategorier