Teks animasi dengan blast.js

menghidupkan elemen HTML menggunakan CSS atau JavaScript adalah lebih kurang tugas yang mudah pada masa kini, terima kasih kepada bantuan perpustakaan. Walau bagaimanapun, anda hanya boleh menghidupkan unsur -unsur sedia ada yang lengkap.

Ini bermakna jika anda ingin menghidupkan satu perkataan dalam perenggan, anda perlu membungkus perkataan dalam satu elemen (seperti rentang) dan kemudian cari dengan sewajarnya.

Jika anda hanya mempunyai satu atau dua elemen span seperti ini, ini bukan masalah besar, tetapi bagaimana jika anda mahu menghidupkan setiap watak dalam perenggan? Untuk setiap watak, anda perlu membuat rentang, yang menambah banyak markup tambahan dan membuat teks sukar untuk diedit. Inilah sebabnya Blast.js wujud.

mata utama

Blast.js adalah plugin jQuery yang membolehkan animasi watak tunggal, kata, atau ayat dalam HTML. Ia melakukan ini dengan membungkus teks yang dipilih dalam satu elemen (seperti rentang) dan kemudian animasi unsur -unsur tersebut.
Plugin menyediakan banyak pilihan penyesuaian, termasuk keupayaan untuk memilih elemen pembalut, carian dan menyerlahkan kata atau frasa tertentu, dan mengawal kelajuan dan gaya animasi. Ia juga memastikan bahawa unsur -unsur yang ada dalam teks tidak dikeluarkan atau rosak.
Walaupun Blast.js berkuasa, tidak semua pengguna memerlukannya, terutama mereka yang tidak memerlukan teks animasi. Walau bagaimanapun, bagi mereka yang memerlukan teks animasi, ia boleh menjadi alat yang berkuasa untuk menambah unsur -unsur dinamik dan interaktif ke laman web.

Apa itu Blast.js?

Blast.js adalah plugin jQuery yang membolehkan anda menghidupkan watak, kata, atau ayat individu. Dalam artikel ini, saya akan memberikan beberapa contoh supaya anda dapat memahami cara menggunakan Blast.js. Untuk menggunakan Blast.js dan cuba contoh berikut, anda memerlukan jQuery serta fail Blast.js, yang boleh didapati di laman web projek Blast.js.

Seperti yang dinyatakan sebelum ini, Blast.js membolehkan kita membuat unsur -unsur di sekitar aksara, kata -kata, atau ayat, tetapi perpustakaan tidak terhad kepada pilihan ini. Dalam bahagian seterusnya, kami akan melihat beberapa contoh khusus untuk memperkenalkan beberapa pilihan. Senarai pilihan yang akan kita lihat tidak lengkap;

menghidupkan teks pertama kami

Dalam contoh pertama ini, kita akan menghidupkan tajuk, memindahkan mereka ke watak yang betul oleh watak. Satu -satunya kod HTML yang diperlukan adalah seperti berikut:

<h1 id="gt">></h1>Hello World!>

Selepas memasukkan jQuery dan blast.js, sekeping kod seterusnya dalam bahagian ini akan menjadi semua dalam fail JavaScript tersuai dalam pengendali siap JQuery untuk memastikan halaman siap:

$(function() {
  // 动画代码
});

Sekarang kita boleh menghidupkan tajuk kita. Dalam contoh kami, menggunakan $ ('H1') untuk mencari elemen akan cukup, tetapi dalam kes anda, anda akan menggunakan pemilih yang sesuai untuk mencari elemen.

blast.js menyediakan kaedah baru pada objek jQuery: .blast (), yang menerima parameter: objek yang menyenaraikan semua pilihan yang anda mahu gunakan. Dalam contoh pertama ini, kita akan menggunakan hanya satu pilihan pemula: 'watak', menunjukkan bahawa kita mahu menghidupkan watak tajuk kita dengan watak.

Jika kita tidak memasukkan parameter, nilai lalai 'perkataan' (bukannya "watak" akan digunakan, jadi ia akan dibuat di sekitar setiap perkataan (bukan setiap watak, seperti yang kita mahu di sini) rentang.

<h1 id="gt">></h1>Hello World!>

dengan cara ini, elemen H1 mudah kami akan animasi dan DOM berikut akan dihasilkan:

$(function() {
  // 动画代码
});

Perhatikan bahawa ruang antara kata -kata telah dipelihara dan tidak terkandung ke dalam rentang.

Sekarang, kita perlu mengambil elemen span yang dihasilkan. Sebagai contoh, anda boleh mencuba $ ('. Blast'), tetapi ada cara yang lebih mudah. Secara lalai, kaedah .blast () mengembalikan unsur -unsur yang dihasilkan, jadi anda hanya perlu menyimpannya dalam pembolehubah untuk mengambil unsur -unsur ini.

$('h1').blast({
  delimiter: 'character'
});

Ia berguna untuk mendapatkan unsur -unsur yang dihasilkan, tetapi tidak selalu. Jadi jika anda mahu kaedah .blast () untuk mengembalikan elemen induk (elemen utama yang anda animasi) dan bukannya elemen yang dihasilkan, anda boleh menggunakan pilihan lain: ReturnGenerated. Secara lalai, ia ditetapkan untuk benar;

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

mari kita kembali kepada contoh kami untuk menghidupkan unsur -unsur yang kami kumpulkan. Kami akan menggunakan kaedah JQuery.

Kaedah

.eech () akan melaksanakan fungsi untuk setiap elemen yang disimpan dalam objek jQuery. Berikut adalah fungsi yang akan kami gunakan, dijelaskan dalam komen.

var chars = $('h1').blast({
  delimiter: 'character'
});

Kod Penjelasan: Pertama, kami menggunakan $ (ini) untuk mendapatkan elemen semasa (dalam hal ini aksara semasa). Kami memulakan kedudukan relatifnya kepada sifar, dan akhirnya, kami menghidupkan kedudukan ini.

seperti yang ditunjukkan dalam komen yang sepadan dalam kod, kaedah .delay () memulakan animasi selepas bilangan milisaat yang ditakrifkan, menggunakan i * 45, di mana saya adalah kaunter yang disediakan oleh jQuery (kami lulus sebagai parameter) . Untuk watak pertama, saya sama dengan 0, jadi animasi bermula dengan segera, maka ia sama dengan 1, watak kedua adalah animasi selepas 45 milisaat, dan sebagainya.

Animasi kami sudah siap dan boleh dijalankan! Anda boleh melihatnya dalam contoh langsung di bawah.

Pilih elemen pembungkusan anda

Secara lalai, elemen span dicipta, yang biasanya apa yang kita mahu. Tetapi kadang -kadang kita mahu menggunakan unsur -unsur lain seperti kuat, em dan bahkan div dan p. Dengan Blast.js, ini mungkin.

Untuk melakukan ini, dalam contoh seterusnya, kami akan membuat perenggan di mana setiap perkataan akan digayakan dengan warna rawak dan dikemas dalam elemen EM.

Pertama, kita memerlukan fungsi untuk memberi kita nombor rawak. Kami akan menggunakan versi Math.random () yang diubah suai yang terdapat di JavaScript asli.

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

Fungsi baru ini akan memberi kita bilangan bulat rawak antara Min dan Max, yang diluluskan sebagai argumen ke dalam fungsi.

Sekarang kita sudah bersedia untuk mewarnai perenggan kita. Pertama, kami menggunakan 'perkataan' pembatas untuk menghidupkan perenggan kami. Kami telah menambah pilihan baru: tag, yang membolehkan kami menunjukkan tag yang kami mahu Blast.js digunakan untuk menjana unsur -unsur. Kami menetapkannya kepada 'em' dan bukannya 'span' lalai.

<h1 id="gt">></h1>Hello World!>

Sekarang semua kata -kata kami terkandung dalam tag EM. Untuk setiap tag, kami menggunakan kaedah JQuery.

$(function() {
  // 动画代码
});

Seterusnya, kami akan menambah satu lagi baris kod untuk menerangkan bagaimana untuk mendapatkan keadaan awal elemen induk (iaitu bagaimana untuk menghapuskan semua tag yang dijana tambahan ini).

Untuk melakukan ini, anda boleh memberikan nilai palsu kepada kaedah .blast (). Ini memberitahu Blast.js bahawa semua tag yang ditambahkan oleh panggilan sebelumnya menggunakan kaedah ini akan dikeluarkan.

Anda boleh melihat contoh ini dalam versi langsung di bawah. Cuba menaip salah satu perkataan yang ada yang dipaparkan pada halaman untuk melihat kesannya.

Cari dengan blast.js

Secara lalai, Blast.js mencipta unsur -unsur di sekitar setiap perkataan, watak, atau ayat dalam teks. Tetapi anda juga boleh mencari hanya satu perkataan atau sekumpulan perkataan: Blast.js dan kemudian merangkum setiap penampilan perkataan atau frasa ke dalam elemen. Untuk melakukan ini, kami akan menggunakan pilihan carian, yang nilainya adalah rentetan, bukan pilihan pembatas.

Untuk demonstrasi, kami akan membuat borang dengan input dan hantar butang. Pengguna akan menunjukkan perkataan dalam input untuk mencari dalam perenggan tertentu, dan kemudian Blast.js akan merangkum istilah yang dicari ke dalam elemen SPAN.

$('h1').blast({
  delimiter: 'character'
});

kami akan melakukan ini menggunakan acara penyerahan pada borang.

Arahan

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

E.PreventDefault ();

Kami menggunakan pemilih yang betul untuk mendapatkan perenggan kami sebelum menggunakan kaedah .blast () dengan nilai palsu untuk kali pertama. Dengan cara ini, jika pengguna telah melakukan carian lain sebelum ini, carian ini akan dibersihkan.

Seterusnya, kami menggunakan kaedah .blast () sekali lagi, kali ini istilah yang diperlukan untuk mencari. Untuk melakukan ini, kami menggunakan pilihan carian untuk menyediakannya dengan nilai input. Dua pilihan lain tidak wajib, tetapi saya berharap untuk menunjukkan kepada anda kewujudan mereka.

Pilihan CustomClass

membolehkan kami menambah nama kelas kami sendiri kepada elemen yang dihasilkan. Jika anda melihat unsur -unsur yang dihasilkan dalam contoh sebelumnya, anda pasti akan melihat bahawa mereka semua mempunyai kelas letupan. Menggunakan CustomClass, anda boleh menambah satu atau lebih kelas.

Pilihan GenerateIndexid

adalah nilai boolean. Tetapkan kepada Benar, ia akan menambah ID kepada setiap elemen yang dihasilkan. Untuk bekerja, ia memerlukan pilihan Customclass. Di sini kita memilih carian kelas, jadi elemen yang dihasilkan pertama akan mempunyai id carian-1, elemen kedua akan mempunyai carian-2, dan sebagainya.

Untuk menjadikan contoh kita berguna, kita perlu menambah beberapa peraturan dalam CSS untuk menyerlahkan unsur -unsur yang dihasilkan. Sebagai contoh, anda boleh menggunakan peraturan berikut.

var chars = $('h1').blast({
  delimiter: 'character'
});

Anda boleh melihat contoh ini dalam versi langsung di bawah. Cuba menaip salah satu perkataan yang ada yang dipaparkan pada halaman untuk melihat kesannya.

bagaimana dengan unsur -unsur yang ada?

Selepas kita memahami bagaimana Blast.js berfungsi, kini terdapat soalan penting untuk dijawab. Oleh kerana kita memohon kaedah .blast () ke bekas, bagaimana jika bekas ini mengandungi unsur -unsur lain selain nod teks? Sebagai contoh, bagaimana jika kita menggunakan letupan ke perenggan berikut?

<h1 id="gt">></h1>Hello World!>

blast.js tidak akan memusnahkan pokok dom anda. Dalam kes ini, elemen span yang sedia ada tidak dikeluarkan dan elemen rentang baru (dengan kelas letupan) dibuat. Dengan melaksanakan $ ('P'). BLAST () Pada perenggan di atas, kami akan menghasilkan hasil berikut:

$(function() {
  // 动画代码
});

Terakhir: Bagaimana jika elemen span yang ada ini sebenarnya adalah elemen span yang dihasilkan oleh Blast.js? Jawapannya bergantung pada apa yang anda mahu lakukan.

Katakan kami menggunakan kaedah .blast () ke perenggan dan tetapkan pilihan pembatas kepada 'perkataan', jika kami menggunakan kaedah yang sama sekali lagi, elemen yang dihasilkan sebelumnya akan dikeluarkan sebelum membuat elemen baru, walaupun sama adalah benar untuk panggilan baru untuk menggunakan carian dan bukan pemisah.

Walau bagaimanapun, jika anda mencari istilah dan hubungi kaedah .blast () sekali lagi untuk mencari istilah baru, carian lama tidak akan dikeluarkan. Dalam contoh terakhir di bahagian sebelumnya, cuba keluarkan panggilan. Dalam kes ini, carian baru akan diserlahkan, tetapi carian lama juga akan tetap diserlahkan.

Bagaimanapun

Blast.js tidak berguna kepada semua orang, dan ada yang menganggapnya tidak perlu. Walau bagaimanapun, jika anda ingin menghidupkan teks, ini mungkin salah satu pilihan terbaik yang boleh anda temukan.

Seperti yang disebutkan di atas, anda boleh mencari pilihan lain untuk menyesuaikan elemen yang dihasilkan. Anda juga boleh memilih untuk melumpuhkan harta Aria.

Jika anda mempunyai idea tentang cara menggunakannya dengan cara yang kreatif, atau jika anda telah menggunakan alat ini atau lain -lain untuk menghidupkan teks, jangan ragu untuk memberitahu kami dalam perbincangan.

Soalan Lazim (FAQ) pada teks animasi menggunakan blast.js

bagaimana memasang blast.js dalam projek saya?

Untuk memasang Blast.js dalam projek anda, anda boleh menggunakan NPM atau Bower. Jika anda menggunakan NPM, anda boleh memasangnya dengan menjalankan perintah NPM Pasang Teks BLAST. Jika anda menggunakan Bower, perintah itu Bower memasang teks letupan. Selepas pemasangan, anda boleh menggunakan tag skrip untuk memasukkannya ke dalam fail HTML anda. Ingatlah untuk memasukkan jQuery sebelum Blast.js kerana ia adalah plugin jQuery.

Apakah pemisah yang berbeza dalam Blast.js?

blast.js menyediakan empat pembatas yang berbeza: watak, perkataan, ayat, dan elemen. Pemisah watak memecahkan teks ke dalam satu watak. Pemisah perkataan memecahkan teks ke dalam kata -kata. Pemisah ayat memecahkan teks ke dalam ayat. Pemisah elemen memecahkan teks ke dalam elemen HTML.

bagaimana menggunakan blast.js untuk menghidupkan teks?

Untuk menggunakan blast.js untuk menghidupkan teks, anda perlu menggunakan jQuery untuk memilih teks untuk menjadi animasi. Anda kemudian boleh menggunakan kaedah .blast () untuk memecahkan teks menjadi serpihan. Selepas itu, anda boleh menggunakan CSS atau JQuery untuk menghidupkan klip ini.

Bolehkah saya menggunakan Blast.js tanpa jQuery?

tidak, blast.js adalah plugin jQuery, jadi ia memerlukan jQuery untuk berfungsi. Anda perlu memasukkan jQuery dalam projek anda sebelum memasukkan Blast.js.

Bagaimana menggunakan pembatas adat di Blast.js?

Untuk menggunakan pembatas tersuai dalam blast.js, anda boleh lulus ungkapan biasa ke kaedah .blast (). Ekspresi biasa sepadan dengan watak yang ingin anda gunakan sebagai pemisah.

Mengapa animasi Blast.js saya tidak berfungsi?

Jika animasi blast.js anda tidak berfungsi, mungkin ada beberapa sebab. Pertama, pastikan anda memasukkan jQuery dan Blast.js dalam projek anda. Kedua, periksa jika anda menggunakan kaedah .blast () dengan betul. Ketiga, periksa sama ada kod animasi CSS atau jQuery anda betul.

Bolehkah saya menggunakan Blast.js untuk menghidupkan elemen HTML?

Ya, anda boleh menggunakan Blast.js untuk menghidupkan elemen HTML. Anda boleh menggunakan pemisah elemen untuk memecahkan HTML ke dalam elemen individu dan kemudian menggunakan CSS atau jQuery untuk menghidupkannya.

Bagaimana untuk mengawal kelajuan animasi Blast.js?

Kelajuan animasi Blast.js dikawal oleh CSS atau kod animasi jQuery, bukan oleh Blast.js sendiri. Anda boleh menyesuaikan kelajuan dengan menukar parameter tempoh dalam kod animasi.

Bolehkah saya menggunakan Blast.js dengan perpustakaan JavaScript yang lain?

Ya, anda boleh menggunakan Blast.js dengan perpustakaan JavaScript yang lain. Walau bagaimanapun, sejak Blast.js adalah plugin jQuery, anda perlu memasukkan jQuery dalam projek anda.

bagaimana untuk mengeluarkan kesan letupan.js dari teks saya?

Untuk mengeluarkan kesan Blast.js dari teks anda, anda boleh menggunakan kaedah .Unblast (). Kaedah ini mengembalikan teks ke keadaan asalnya, mengeluarkan semua kesan letupan.js.

Atas ialah kandungan terperinci Teks animasi dengan blast.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!