Cara Membuat Efek Teks Pelangi Dengan JavaScript
12.01.00
11 Komentar
Cara Membuat Efek Teks Pelangi Dengan JavaScript - Teks dengan efek rainbow atau warna-warni seperti pelangi ini memang sangat menarik untuk di coba di terapkan di blog kita, apalagi dengan efek warna yang berganti-ganti membuat mata pembaca tertuju pada warna tersebut sehingga kemungkinan besar visitor melihatnya. Biasanya para blogger yang baru mengenal blog suka dengan menghiasi blognya dengan beberapa widget atau efek-efek seperti hujan salju dan efek animasi lainnya termasuk efek teks pelangi ini.
Dengan bantuan JavaScript, tentunya efek yang dihasilkan sangat bagus dan tidak terlalu membebankan kepada loading blog sehingga akan menjadi lambat, karena kode script efek teks rainbow ini sangat simple dan sederhana. Efek teks warna-warni ini memang tidak begitu wajib untuk kita gunakan karena memang tidak terlalu besar manfaatnya untuk blog kita, oleh karena itu ini hanyalah digunakan untuk mendesain atau mempercantik tampilan blog saja, tapi masih tergantung Anda mau menggunakan cara ini atau tidak.
Baiklah untuk membuat tulisan pelangi ini caranya sangat mudah sekali, dan bisa di mengerti oleh siapa saja baik itu yang pemula belajar blog dan apalagi yang sudah lama mengenal blogger tentunya sudah paham dengan kode-kode script di blog. Langsung saja bagi Anda yang ingin mencoba membuat efek teks pelangi silahkan baca tutorialnya dibawah ini :
Berikut adalah kode JavaScriptnya :
<style type="text/css">
#highlight{font:bold 50px Impact,Arial,Sans-Serif;}
</style>
<script language="javascript" type="text/javascript">
var teks="EFEK TEKS PELANGI" // teks Anda di sini
var speed=25 // atur kecepatan perubahan warna
if (document.all||document.getElementById) {
document.write('<span id="highlight">' + teks + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext() {
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change() {
if (seq==6) {
b--
if (b==0)
seq=1
}
if (seq==5) {
r++
if (r==12)
seq=6
}
if (seq==4) {
g--
if (g==0)
seq=5
}
if (seq==3) {
b++
if (b==12)
seq=4
}
if (seq==2) {
r--
if (r==0)
seq=3
}
if (seq==1) {
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect() {
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>Cara Setting :
- EFEK TEKS PELANGI untuk mengubah tulisan
- 25 untuk mengubah kecepatan perubahan warna
Baca Juga :
Membuat Garis Pelangi Dengan CSS di Blog
Sekian artikel mengenai Cara Membuat Efek Teks Pelangi Dengan JavaScript. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
Wah bagus nih kang sepertinya boleh juga untuk dicoba. Terima kasih kang untuk ilmunya sangat bermanfaat sekali.
BalasHapushehe lumayan lah buat warna warni di blog :D
Hapusteks pelangi bagus jg nih mas, biar pengunjung ngerasa di istimewakan dan menambah semangat saat membaca. tpi klo efeknya cepat bisa buat sakit mata jg yaa... ahh, pelangi - menambah romantika hidupku sajaa :D
BalasHapusah bisa aja si mba, ada pelangi di mata mu :-d wkwk
HapusWah boleh di coba nih mas seru gak membuat jenuh pembaca :) penuh warna seakan bergairah dan semangat lagi untuk membaca :)
BalasHapusiya mas, seakan hidup lebih bewarna :D
Hapusefek pelangi tentu sangat menggoda untuk mencobakannya agar semakin berwarna warni, cuman kalau pake java nggak bikin berat ya mang?
BalasHapusuntuk kode javascript yang tidak di bungkus dengan format .js ini tidak terlalu memberatkan kang :D
HapusCocok untuk blogger yg berjiwa muda jadi meriah penuh warna,BTW blognya sekarang pakai POPcash YA? Duh :)
BalasHapushaha, iya om sudah lama juga sih, maaf kalau sedikit menggangu nanti juga di lepas =D
Hapusini untuk teks artikelnya ya bro
BalasHapus