Kod typing text animeringar med jQuery TypeIt

De combo av jQuery och text har inga gränser på webben. Du kan bygga nästan allt med lite kreativitet och rätt JavaScript-bibliotek.

Ett sådant bibliotek är Skriv det, byggd som ett gratis jQuery-plugin. Det låter dig skapa dynamiska typ animeringar Det ser oerhört realistiskt ut. Du kan även definiera anpassade pauser mellan tangenttryckningar för att skapa din egen lättnad för animationen.

TypeIt är 100% gratis och öppen källkod, byggd som en textverktyg för jQuery-community. All dokumentation finns tillgänglig online och otroligt lätt att följa.

Observera dock att medan TypeIt kommer med en gratis personlig licens, kommersiella licenser kostar tyvärr pengar. Men du kan använda den fria personliga licensen för alltid och den går aldrig ut, så det är en bra resurs för alla dina personliga projekt eller till och med din personliga webbplats.

Du kan komma igång med lägger till den rätta TypeIt JavaScript-filen via CDN rätt till sidans rubrik. Lägg sedan till jQuery, skriv lite text och koppla samman allt tillsammans. Enkel!

Vanligtvis kommer du rikta in en specifik div på sidan och använd den som en behållare för textanimering. Här är en provkodsbit för att visa dig hur det fungerar:

 $ ('.typ-it'). typIt (strängar: ['Detta är min sträng!']); 

Av passerar anpassade alternativ till Skriv det() funktionen kan du sakta ner skrivhastigheten, lägga till pauser med vissa intervall och till och med återställa inställningarna med vissa intervall för att ändra typhastigheten mellan animering.

Du kan till och med testa dessa alternativ på plugin-sidan om du är villig att spendera lite tid runt med inställningarna.

Denna text animationsbyggare är det perfekta exemplet på vad du kan göra med det här plugin. Du får så många anpassade alternativ att du även kan bygga en webbapp, använder det här plugin, till skapa animationer på flugan!

På den viktigaste plugin-sidan hittar du också mer avancerade alternativ mot botten med kodprofiler du kan kopiera.

Så, ladda ner TypeIt och ge det ett skott! När du förstår det fungerar det verkligen roligt. Och om du har några frågor eller förslag till utvecklaren kan du ansluta till honom på Twitter @amacarthur.