www.domainesia.com

Cara Membuat Efek Teks Pelangi Dengan JavaScript

Cara Membuat Efek Teks Pelangi Dengan JavaScript

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

11 Komentar untuk "Cara Membuat Efek Teks Pelangi Dengan JavaScript"

  1. Wah bagus nih kang sepertinya boleh juga untuk dicoba. Terima kasih kang untuk ilmunya sangat bermanfaat sekali.

    BalasHapus
  2. teks 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

    BalasHapus
    Balasan
    1. ah bisa aja si mba, ada pelangi di mata mu :-d wkwk

      Hapus
  3. Wah boleh di coba nih mas seru gak membuat jenuh pembaca :) penuh warna seakan bergairah dan semangat lagi untuk membaca :)

    BalasHapus
  4. efek pelangi tentu sangat menggoda untuk mencobakannya agar semakin berwarna warni, cuman kalau pake java nggak bikin berat ya mang?

    BalasHapus
    Balasan
    1. untuk kode javascript yang tidak di bungkus dengan format .js ini tidak terlalu memberatkan kang :D

      Hapus
  5. Cocok untuk blogger yg berjiwa muda jadi meriah penuh warna,BTW blognya sekarang pakai POPcash YA? Duh :)

    BalasHapus
    Balasan
    1. haha, iya om sudah lama juga sih, maaf kalau sedikit menggangu nanti juga di lepas =D

      Hapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting