de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Leicht Text mit Textillate.js zu animieren

In unserer vorheriger Beitrag, wir haben euch Animate.css vorgestellt, eine tolle CSS3-Bibliothek, die die Erstellung von CSS3-Animationen vereinfacht. In diesem Beitrag stellen wir Ihnen ein jQuery-Plugin vor, das mit Animate.css erstellt wurde und Text mit der Bezeichnung " Textillate.js" animieren kann.

Obwohl Sie Text mit Animate.css animieren können, ist es nur vollständig animiert, nicht Buchstabe für Buchstabe . Selbst wenn Sie einen Ansatz haben, jedes Zeichen in ein Element zu verpacken und es zu animieren, wird es mühsam und nicht effektiv sein. Mit diesem Plugin können Sie jeden einzelnen Buchstaben Ihres Textes einfach animieren.

Textillate.js unterteilt die Animation in 2 Komponenten, In- und Out-Animation . Sie können sie mit verschiedenen Animationen separat anwenden. Alle Animationseffekte verwenden Animate.css-Bibliothekseffekte.

Neben Animate.css basiert auch Textillate.js auf Lettering.js. Wir können sagen, dieses Plugin ist die Kombination dieser 2 leistungsstarken Tools. Animate.css arbeitet an der Animationsfunktion, während sich Lettering.js auf die Typografie konzentriert .

Verwendung

Textillate.js benötigt einige Abhängigkeiten, bevor es verwendet werden kann. Sie sind Animate.css, Lettering.js und jQuery. Nachdem Sie die Dateien heruntergeladen haben, fügen Sie sie in Ihr Projekt ein.

Und vergessen Sie nicht, die Animate.css Bibliothek in den Kopfbereich zu legen.

Grundlegende Markup

Um mit der Verwendung von Textillate.js zu beginnen, müssen Sie eine Klasse von Elementen definieren, die Sie animieren möchten, und dann den ausgewählten Effekt hinzufügen . Bitte beachten Sie, dass dieses Plugin nur für Text funktioniert, der Elemente enthält, so dass jedes Element, das kein Text ist, nicht animiert wird.

Als ein Beispiel haben wir ein Element, das hier Text und eine demo Klasse enthält.

Jeder dieser Buchstaben wird animiert.

Wir rufen den Klassennamen mit der Initialisierung von Textillate.js auf.

Der Text wird nun animiert.

Textillate.js Optionen

Der vorherige JavaScript-Code wendet nur Standardanimationseinstellungen auf den Text an. Um es zu ändern, gibt es zwei Methoden, die Sie verwenden können.

1. Zunächst durch Eingabe von HTML-Daten api wie folgt.

Jeder dieser Buchstaben wird animiert.

data-in-effect definiert den Eingangseffekt des Textes. Während für den Ausgangseffekt können Sie data-out-effect API verwenden.

2. Sie können die Optionen auch in die JavaScript-Textillate.js -Initialisierung wie den folgenden Code einfügen.

Zusätzlich dazu gibt es noch weitere nützliche Optionen, die Sie vielleicht verwenden möchten. Um die vollständige Liste der anderen Optionen anzuzeigen, gehen Sie zur Dokumentationsseite.

Letzter Gedanke

Textillate.js ist ein sehr nützliches Plugin, besonders wenn Sie Benutzer für den Text interessieren möchten, den Sie am meisten hervorheben möchten. Es kann Ihre Website-Überschrift, Dienste, Updates, Werbung oder irgendetwas anderes sein. Und für weitere Verbesserungen können Sie Textillate.js mit einem anderen Plugin wie FitText.js kombinieren, das für gigantischen Anzeigetext vorgesehen ist. Denken Sie wieder daran, die Animation in den richtigen Mengen zu verwenden.

Kostenlose OCR-Tools zum Extrahieren von Text aus Bildern - Best Of

Kostenlose OCR-Tools zum Extrahieren von Text aus Bildern - Best Of

Wenn Sie Text aus einem Bild extrahieren möchten, sollten Sie das OCR-Tool verwenden. OCR-Werkzeuge (Optical Character Recognition, optische Zeichenerkennung) können Text aus Bildern scannen und extrahieren und ermöglichen es Ihnen, alle erforderlichen Änderungen vorzunehmen.In diesem Post werde ich die besten kostenlosen OCR-Tools für verschiedene Plattformen auflisten . Zu

(Tech- und Design-Tipps)

Ein Crashkurs zum Internet der Dinge

Ein Crashkurs zum Internet der Dinge

Stellen Sie sich eine Welt vor, in der alles nicht nur verbunden, sondern auch automatisiert ist . Eine Welt mit einem Halsband, in dem Sie nicht nur wissen, wo Ihr Hund ist, sondern auch, ob Ihr pelziger Kumpel hungrig, schlafend oder krank ist. Eine Welt mit einem Kühlschrank, der dir eine SMS schickt und sagt, dass du fast keine Eier und keine Butter mehr hast.

(Tech- und Design-Tipps)