Code Typing Text Animaties met jQuery TypeIt

De combinatie van jQuery en tekst houdt geen grenzen aan op het internet. Je kunt bijna alles bouwen met een beetje creativiteit en de juiste JavaScript-bibliotheken.

Eén zo'n bibliotheek is Typ het, gebouwd als een gratis jQuery-plug-in. Hiermee kunt u maken dynamische typanimaties dat ziet er ongelooflijk realistisch uit. U kunt zelfs aangepaste pauzes definiëren tussen toetsaanslagen om uw eigen versmalling voor de animatie te maken.

TypeIt is 100% gratis en open-source, gebouwd als een teksttool voor de jQuery-community. Alle documentatie is online beschikbaar en ongelooflijk eenvoudig te volgen.

Let er echter op dat terwijl TypeIt wel een gratis persoonlijke licentie, commerciële licenties kosten helaas geld. Maar u kunt de gratis persoonlijke licentie altijd en voor altijd gebruiken verloopt nooit, dus het is een geweldige bron voor al uw persoonlijke projecten of zelfs uw persoonlijke website.

U kunt aan de slag gaan door het toevoegen van het ruwe TypeIt JavaScript-bestand via CDN recht op de kop van uw pagina. Voeg vervolgens jQuery toe, schrijf wat tekst en sluit alles aan. Eenvoudig!

Meestal zul je dat doen Richt een specifieke div op de pagina en gebruik het als een container voor de tekstanimatie. Hier is een voorbeeld codefragment om u te laten zien hoe dit werkt:

 $ ('. type-it'). typeIt (strings: ['Dit is mijn string!']); 

Door aangepaste opties doorgeven naar de typ het() functie, kunt u de typsnelheid verlagen, pauzes toevoegen met bepaalde intervallen en zelfs de instellingen met bepaalde intervallen opnieuw instellen om de schrijfsnelheid midden in de animatie te wijzigen.

Je kan zelfs test deze opties op de plug-in pagina als je bereid bent om wat tijd te spenderen aan het spelen met de instellingen.

Deze tekstanimatiebouwer is het perfecte voorbeeld van wat u met deze plug-in kunt doen. Je krijgt zoveel aangepaste opties dat je zelfs een web-app kunt bouwen, met behulp van deze plug-in, naar maak animaties on the fly!

Op de hoofdplugin-pagina vindt u ook meer geavanceerde opties naar de bodem toe met codefragmenten die je kunt kopiëren.

Dus download TypeIt en probeer het! Als je het eenmaal werkt, is het echt heel leuk. En als je vragen of suggesties hebt voor de ontwikkelaar, kun je contact met hem opnemen op Twitter @amacarthur.