So erstellen Sie animierte Tippeffekte mit typed.js

Übersicht

Typed.js ist eine Animationsbibliothek, die Java-Skript und andere Skriptsprachen unterstützt. Es bietet Tippanimationseffekte für Text. Wir können die Bibliothek nutzen, indem wir einen CDN-Link zur Bibliothek hinzufügen oder sie mit Node Package Manager (NPM) oder Yarn installieren. Es bietet eine Webseite mit Tippanimationen in jedem Absatz oder Titel. Sie müssen also mehr über den Tippanimationseffekt von typed.js erfahren. Um Animationen zu verwenden, stellttypes.js einen Konstruktor namens typed() zur Verfügung, der zwei Parameter als Eingabe akzeptiert.

Grammatik

Die Syntax zum Erstellen eines Objekts vom Konstruktortyp lautet -

var typed = new Typed(element class or Id, callback function);

In der oben angegebenen Syntax ist die Klasse oder ID das Zielelement, an dem die Tippanimation arbeitet. Die Rückruffunktion ist eine Funktion mit einem Array vom Typ String und einigen Typkonstruktoreigenschaften wie Tippgeschwindigkeit, Rückgabegeschwindigkeit, Schleife und Verzögerung der Rückgabegeschwindigkeit.

Algorithmus

Schritt 1 −Erstellen Sie eine HTML-Datei in einem Texteditor und fügen Sie darin ein HTML-Boilerplate ein.

Schritt 2− Fügen Sie den typed.js-CDN-Link im Head-Tag des HTML-Dokuments hinzu.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>

Schritt 3 − Erstellen Sie nun einen div-Container mit dem ID-Namen „typed-text“.

<div id="typed-text"></div>

Schritt 4 −Erstellen Sie das Skript-Tag vor dem Ende des Body-Tags.

<script></script>

Schritt 5 − Instanziieren Sie den typisierten Konstruktor, erstellen Sie ein Objekt und speichern Sie es in einer Referenzvariablen.

var typed = new Typed();

Schritt 6 − Übergeben Sie die beiden Parameter als ID-Namen des Elements an den typisierten Konstruktor und übergeben Sie eine Funktion, die den Zeichenfolgentext und die Tippgeschwindigkeit als Typespeed enthält.

var typed = new Typed('#typed-text', {
   strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for wach and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
   typeSpeed: 40,
   backSpeed: 10,
   loop: true
});

Schritt 7 −Öffnen Sie die Datei index.html im Browser, Sie sehen die Tippanimation im Zieltext.

Beispiel

In diesem Beispiel verwenden wir typed.js, um eine Tippanimation im Text zu erstellen.

   
   <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>



   
tutorialspoint.com
   

   <script>
      var typed = new Typed('#typed-text', {
         strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for each and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
         typeSpeed: 40,
         backSpeed: 10,
         loop: true
     });
   </script>

Das Bild unten zeigt die Ausgabe des obigen Beispiels und zeigt etwas Text auf dem Browserbildschirm an. Wenn ein Benutzer diese HTML-Datei in einem Browser öffnet, kann er eine in Echtzeit funktionierende Tippanimation sehen.

Fazit

Bei Verwendung von typed.js müssen Sie die Syntax für die korrekte Initialisierung von Typobjekten überprüfen und schreiben. Bei Fehlern in der Syntax funktioniert die Animation nicht ordnungsgemäß. Wir können die Tippgeschwindigkeit und Latenz an unsere Bedürfnisse anpassen, indem wir die Werte in der im Typkonstruktor übergebenen Rückruffunktion ändern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie animierte Tippeffekte mit typed.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!