Code Text eingeben Animationen mit jQuery TypeIt

Die Kombination aus jQuery und Text enthält keine Grenzen im Web. Mit ein wenig Kreativität und den richtigen JavaScript-Bibliotheken können Sie fast alles bauen.

Eine solche Bibliothek ist TypeIt, die als freies jQuery-Plugin erstellt wurde. Sie können dynamische Eingabeanimationen erstellen, die unglaublich realistisch aussehen. Sie können sogar benutzerdefinierte Pausen zwischen Tastenanschlägen definieren, um Ihre eigene Beschleunigung für die Animation zu erstellen.

TypeIt ist 100% kostenlos und Open-Source, als Text-Tool für die jQuery-Community erstellt . Die gesamte Dokumentation ist online verfügbar und unglaublich einfach zu befolgen.

Beachten Sie jedoch, dass TypeIt zwar mit einer kostenlosen persönlichen Lizenz geliefert wird, kommerzielle Lizenzen jedoch leider Geld kosten. Aber Sie können die kostenlose persönliche Lizenz für immer verwenden und sie läuft nie ab, also ist es eine großartige Ressource für all Ihre persönlichen Projekte oder sogar Ihre persönliche Website.

Sie können beginnen, indem Sie die rohe TypeIt-JavaScript-Datei über CDN direkt in die Kopfzeile Ihrer Seite einfügen . Fügen Sie dann jQuery hinzu, schreiben Sie etwas Text und verbinden Sie alles miteinander. Einfach!

In der Regel richten Sie ein bestimmtes div auf der Seite ein und verwenden es als Container für die Textanimation. Hier ist ein Beispielcode-Snippet, um Ihnen zu zeigen, wie das funktioniert:

 $ ('. type-it'). typeIt ({strings: ['Dies ist meine Zeichenkette!']}); 

Indem Sie benutzerdefinierte Optionen an die typeIt() -Funktion übergeben, können Sie die typeIt(), Pausen in bestimmten Intervallen hinzufügen und sogar die Einstellungen in bestimmten Intervallen zurücksetzen, um die typeIt() in der mittleren Animation zu ändern.

Sie können diese Optionen sogar auf der Plugin-Seite testen, wenn Sie bereit sind, etwas Zeit mit den Einstellungen zu verbringen.

Dieser Builder für Textanimation ist das perfekte Beispiel dafür, was Sie mit diesem Plugin tun können. Sie erhalten so viele benutzerdefinierte Optionen, dass Sie mit diesem Plugin sogar eine Web-App erstellen können, um Animationen im laufenden Betrieb zu erstellen.

Auf der Haupt-Plugin-Seite finden Sie auch erweiterte Optionen nach unten mit Code-Snippets, die Sie kopieren können.

Also, laden Sie TypeIt herunter und versuchen Sie es! Sobald es funktioniert, macht es wirklich viel Spaß. Und wenn Sie Fragen oder Anregungen für den Entwickler haben, können Sie sich mit ihm auf Twitter @amacarthur verbinden.