LetteringJS Sederhana

http://letteringjs.com

Pikiran Saya terbuka saat System of Blog menanyakan sesuatu tentang cara membagi-bagi setiap huruf dengan JQuery untuk kemudian dibungkus dengan elemen <span>. Ternyata untuk menciptakan manipulasi teks seperti LetteringJS bisa dengan mudah dibuat. Saya mendapatkan konsep ini dari Stackoverflow - Wrap Each Char in Except Tags with JQuery:

// Bungkus semua huruf 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);
    });
});

Lihat Demo

Cara kerja kode bagian pertama adalah akan memecah setiap huruf kemudian mengelilinginya dengan elemen <span> seperti 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 bagian ke dua bertugas untuk menambahkan kelas-kelas baru 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 seperti LetteringJS.