LetteringJS Sederhana

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

12 Komentar

  • Unknown

    Yeahhhhhhhh sekarang dah ada Lettering dari indo :Q mantepp dengan kemampuan script yang udah mapan memang Mantap untuk mengembangkan sesuatu :) Very Nice

  • Taufik Nurrohman

    @system of blog Haha.. Saya cuma sedang beruntung saja bisa dapat forum diskusi bagus + pertanyaan yang bagus :)

  • Unknown

    @Taufik Nurrohman yups tempat nongkrong termantap untuk coding memang stackoverflow sayang aku gak ngerti bhs inggris, coba aku pinter bhs inggris pasti ngerti dan banyak belajar dari sana, mau pake' translate hasil kata2nya gak karuan jadi maless

  • Beben Koben

    kalau saya manual saja, pakek rainbow dari si rainbow mania...hohoho
    just css...kalo mau warna-wanri semua jg bisa pakek javascript!
    apaan yah judulna di sayah ada da postingannya...hihihihi :p

  • Unknown

    Apa konsep letteringJS diatas bisa dirubah agar yang dibungkus setiap kata bukan hurufnya??

    • Taufik Nurrohman

      $('.splitWord').children().andSelf().contents().each(function() {
      if (this.nodeType == 3) {
      var txt = $(this).text().split(' ').join('</span> <span class="char">');
      $(this).replaceWith('<span class="char">' + txt + '</span>');
      }
      });
      $('.splitWord').each(function() {
      $(this).find('.char').each(function(i) {
      $(this).addClass('char' + (i + 1));
      });
      });

      Demo: http://jsfiddle.net/ssw5q/26/

      • Unknown

        Makasih mas atas jawabannya.. :)
        Sukses selalu.. :-bd

        • Unknown

          sip :)

          ada pertanyaan mas,
          kalau mau dibungkus tiap dua kata gitu bisa ndak mas ?

          soalnya aku mau ngambil textnya untuk aku jadiin class, nah kalo pake cara yang diatas kan dibungkus satu persatu tuh, jadi tiap span mempunyai class tiap masing masing huruf

          nah kalo pake cara yang ditanyakan oleh MKR , cara ngambil classnya untuk tiap tiap kata bisa ndak mas ?

          Contoh kaya gini :

          • Taufik Nurrohman

            Maksudnya kata-kata yang ada di dalam teks dijadikan sebagai nama kelas? Kalau ada spasi atau karakter-karakter spesial kan nanti malah jadi tidak valid.

            • Unknown

              iya mas,
              aku juga udah coba tak utek utek tuh JS malah jadi tidak valid js nya..

              soalnya aku mau buat tooltip untuk chord guitar mas, aku ambil kata kata yang ada didalam teks untuk aku jadikan class,

              contohnya bisa lihat kesini mas : Kaya Gini

              soalnya kalau mau nulis satu persatu kan ribet banget :D

  • Putra

    saya coba di header sy, masih gagal juga. Udah tak samaain sm class di scriptnya, masih tetep juga gagal, solusinya apa mas?

    • Taufik Nurrohman

      Masukkan ke dalam event .ready()

      $(document).ready(function() {
      // Bungkus semua huruf dengan elemen span
      $('#header h1').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`, ...
      $('#header h1').find('.char').each(function(i) {
      i = i+1;
      $(this).addClass('char' + i);
      });
      });

Komentar telah ditutup.