Kode Skriving Tekst Animasjoner med jQuery TypeIt

De kombinasjon av jQuery og tekst har ingen grenser på nettet. Du kan bygge nesten alt med litt kreativitet og de riktige JavaScript-bibliotekene.

Et slikt bibliotek er Skriv det, bygget som en gratis jQuery-plugin. Det lar deg lage dynamiske skrive animasjoner det ser utrolig realistisk ut. Du kan selv definere tilpassede pauser mellom tastetrykk for å bygge din egen lettelse for animasjonen.

TypeIt er 100% gratis og åpen kildekode, bygget som en tekstverktøy for jQuery-fellesskapet. All dokumentasjonen er tilgjengelig på nettet og utrolig enkelt å følge.

Vær imidlertid oppmerksom på at mens TypeIt kommer med en gratis personlig lisens, kommersielle lisenser koster dessverre koster penger. Men du kan bruke den gratis personlige lisensen for alltid og den utløper aldri, så det er en flott ressurs for alle dine personlige prosjekter eller til og med ditt personlige nettsted.

Du kan komme i gang med legger til den rå TypeIt JavaScript-filen via CDN rett til sidens overskrift. Deretter legger du til jQuery, skriver litt tekst, og kobler sammen alt sammen. Enkel!

Vanligvis vil du målrette en bestemt div på siden og bruk den som en beholder for tekst animasjonen. Her er en prøve kodebit for å vise deg hvordan dette virker:

 $ ('.type-it') .typeIt (strenger: ['Dette er min streng!']); 

Av passerer tilpassede alternativer til Skriv det() funksjon, kan du senke skrivehastigheten, legge til pauser med bestemte intervaller, og til og med tilbakestille innstillingene med visse intervaller for å endre skrivehastigheten mid-animasjon.

Du kan til og med test disse alternativene på plugin-siden hvis du er villig til å tilbringe litt tid med å titte rundt med innstillingene.

Denne tekst animasjonsbyggeren er det perfekte eksempelet på hva du kan gjøre med denne plugin. Du får så mange tilpassede alternativer at du selv kan bygge en web-app, bruker dette pluginet, til lag animasjoner på fluen!

På hovedinnstillingssiden finner du også mer avanserte alternativer mot bunnen med kodestykker du kan kopiere.

Så, last ned TypeIt og gi det et skudd! Når du får det til å fungere, er det virkelig mye moro. Og hvis du har noen spørsmål eller forslag til utvikleren, kan du koble deg til ham på Twitter @amacarthur.