Cara mencipta kesan menaip animasi menggunakan typed.js

Ikhtisar

Typed.js ialah perpustakaan animasi yang menyokong skrip java dan bahasa skrip lain. Ia menyediakan kesan animasi menaip ke teks. Kita boleh menggunakan perpustakaan dengan menambahkan pautan CDN ke perpustakaan atau memasangnya menggunakan Pengurus Pakej Node (NPM) atau benang. Ia menyediakan halaman web dengan animasi menaip dalam mana-mana perenggan atau tajuk. Jadi anda perlu mengetahui lebih lanjut tentang kesan animasi menaip typed.js. Untuk menggunakan animasi, types.js menyediakan pembina yang dipanggil typed() yang menerima dua parameter sebagai input.

Tatabahasa

Sintaks untuk mencipta objek jenis pembina ialah -

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

Dalam sintaks yang diberikan di atas, kelas atau ID ialah elemen sasaran yang digunakan oleh animasi menaip. Fungsi panggil balik ialah fungsi dengan tatasusunan rentetan jenis dan beberapa sifat pembina jenis seperti kelajuan menaip, kelajuan kembali, gelung dan kelewatan kelajuan kembali.

Algoritma

Langkah 1−Buat fail HTML dalam editor teks dan tambahkan boilerplate HTML di dalamnya.

Langkah 2− Tambah pautan typed.js CDN dalam teg kepala dokumen HTML.

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

Langkah 3 − Sekarang buat bekas div dengan nama ID "typed-text".

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

Langkah 4 −Buat tag skrip sebelum akhir tag badan.

<script></script>

Langkah 5 − Segerakkan pembina yang ditaip dan cipta objek dan simpannya dalam pembolehubah rujukan.

var typed = new Typed();

Langkah 6 − Hantar dua parameter kepada pembina yang ditaip sebagai nama id elemen dan lulus fungsi yang mengandungi teks rentetan dan kelajuan menaip sebagai kelajuan taip.

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
});

Langkah 7 −Buka fail index.html dalam penyemak imbas, anda akan melihat animasi menaip dalam teks sasaran.

Contoh

Dalam contoh ini, kami akan menggunakan typed.js untuk mencipta animasi menaip dalam teks.

   
   <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>

Imej di bawah menunjukkan output contoh di atas, menunjukkan beberapa teks pada skrin penyemak imbas. Apabila pengguna membuka fail HTML ini dalam penyemak imbas, pengguna boleh melihat animasi menaip berfungsi dalam masa nyata.

Kesimpulan

Apabila menggunakan typed.js, anda mesti menyemak dan menulis sintaks untuk memulakan objek jenis dengan betul, jika terdapat sebarang ralat dalam sintaks, animasi tidak akan berfungsi dengan betul. Kami boleh menyesuaikan kelajuan dan kependaman menaip mengikut keperluan kami dengan menukar nilai dalam fungsi panggil balik yang diluluskan dalam pembina jenis.

Atas ialah kandungan terperinci Cara mencipta kesan menaip animasi menggunakan typed.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!