Pikiran Saya terbuka ketika System of Blog menanyakan sesuatu perihal cara membagi-bagi setiap abjad dengan jQuery untuk lalu dibungkus dengan elemen <span>. Ternyata untuk membuat manipulasi teks menyerupai LetteringJS dapat dengan gampang dibuat. Saya mendapat konsep ini dari Stackoverflow - Wrap Each Char in Except Tags with jQuery:
// Bungkus semua abjad dengan elemen span $('.splitWord').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith( $(this).text().replace(/(\w)/g, "<span class='char'>$&</span>") ); } }); // Menambahkan kelas `.char1`, `.char2`, `.char3`, ... $('.splitWord').each(function() { $('span.char', this).each(function(i) { i = i+1; $(this).addClass('char' + i); }); });Cara kerja instruksi bab pertama yakni akan memecah setiap abjad lalu mengelilinginya dengan elemen <span> menyerupai ini:
<p class="splitWord"> <span class="char">L</span> <span class="char">o</span> <span class="char">r</span> <span class="char">e</span> <span class="char">m</span> </p>Dan bab ke dua bertugas untuk menambahkan kelas-kelas gres yang lebih spesifik dan berbeda satu sama lain:
<p class="splitWord"> <span class="char char1">L</span> <span class="char char2">o</span> <span class="char char3">r</span> <span class="char char4">e</span> <span class="char char5">m</span> </p>Sama persis menyerupai LetteringJS.
Sumber https://www.dte.web.id/