Kode Skrivning Tekst Animationer med jQuery TypeIt

Det combo af jQuery og tekst har ingen grænser på nettet. Du kan bygge næsten alt med lidt kreativitet og de rigtige JavaScript-biblioteker.

Et sådant bibliotek er Skriv det, bygget som et gratis jQuery-plugin. Det lader dig oprette dynamiske skrive animationer det ser utroligt realistisk ud. Du kan endda definere brugerdefinerede pauser mellem tastetryk for at opbygge din egen lempelse for animationen.

TypeIt er 100% fri og open source, bygget som en tekstværktøj til jQuery-fællesskabet. Al dokumentation er tilgængelig online og utrolig let at følge.

Men bemærk bare, at mens TypeIt kommer med en gratis personlig licens, kommercielle licenser koster desværre koster penge. Men du kan bruge den gratis personlige licens for evigt og det udløber aldrig, så det er en stor ressource for alle dine personlige projekter eller endda din personlige hjemmeside.

Du kan komme i gang med tilføjer den rå TypeIt JavaScript-fil via CDN ret til sideens overskrift. Tilføj derefter jQuery, skriv lidt tekst, og tilslut det hele sammen. Enkel!

Normalt vil du målrette en bestemt div på siden og brug det som en beholder til tekst animationen. Her er en prøve kodeuddrag for at vise dig, hvordan dette virker:

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

Ved passerer brugerdefinerede muligheder til Skriv det() funktion, kan du sænke skrivehastigheden, tilføje pauser med bestemte intervaller og endda nulstille indstillingerne med bestemte intervaller for at ændre typens hastighed mid-animation.

Du kan endda test disse muligheder på plugin-siden, hvis du er villig til at bruge lidt tid på at lege rundt med indstillingerne.

Denne tekst animationsbygger er det perfekte eksempel på hvad du kan gøre med dette plugin. Du får så mange brugerdefinerede indstillinger, at du selv kan opbygge en webapp, bruger dette plugin, til skabe animationer på flugt!

På den vigtigste plugin side finder du også mere avancerede muligheder mod bunden med kodestykker, du kan kopiere.

Så download TypeIt og giv det et skud! Når du får det til at fungere, er det virkelig sjovt. Og hvis du har spørgsmål eller forslag til udvikleren, kan du oprette forbindelse til ham på Twitter @amacarthur.