LetteringJS Sederhana
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);
});
});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 Comments:
Yeahhhhhhhh sekarang dah ada Lettering dari indo :Q mantepp dengan kemampuan script yang udah mapan memang Mantap untuk mengembangkan sesuatu :) Very Nice
@system of blog Haha.. Saya cuma sedang beruntung saja bisa dapat forum diskusi bagus + pertanyaan yang bagus :)
@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
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
Apa konsep letteringJS diatas bisa dirubah agar yang dibungkus setiap kata bukan hurufnya??
$('.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/
Makasih mas atas jawabannya.. :)
Sukses selalu.. :-bd
saya coba di header sy, masih gagal juga. Udah tak samaain sm class di scriptnya, masih tetep juga gagal, solusinya apa mas?
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);
});
});
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 : [url=http://jsfiddle.net/hidayat_rifan/p3o5L42y/][/url]
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.
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 : [url=http://chordmint.blogspot.com/2014/11/chord-souqy-jelas-sakit.html]Kaya Gini[/url]
soalnya kalau mau nulis satu persatu kan ribet banget :D
Post a Comment
<< Home