Do it ! : Membuat Rainbow Background Pada website

Yang namanya website selalu penuh dengan warna, dengan script ini, website anda akan lebih berwarna.

RAINBOW BACKGROUND

Background akan terus berubah warna dengan acak.

untuk memasukkan script dibawah ke website anda atau inserting the rainbow background script to your website *wess, pengen berbahasa english rupanya*

berikut caranya:

1. salin script dibawah lalu simpan dengan nama file "rainbowbg.js"

var colors = new Array("#FFFF00","#00FFFF","#FF00FF","#CCFFCC","#000000","#FFAA00","#FFFF66","#0000FF","#FFFFFF","#00FF00");
var hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
 
var nPause = 1*1000;
var nSpeed = <span style="background-color: rgb(51, 51, 255);"><font color="#ffffff">50</font></span>;
 
var redStart;
var greenStart;
var blueStart;
 
var redEnd;
var greenEnd;
var blueEnd;
 
var redCurrent;
var greenCurrrent;
var blueCurrent;
 
var nStep=1;
var nColorStart=0;
var nColorEnd=1;
var rainbowTimer;
 
function getNextColor() 
{
   redStart = parseInt("0x"+colors[nColorStart].substring(1,3));
   greenStart = parseInt("0x"+colors[nColorStart].substring(3,5));
   blueStart = parseInt("0x"+colors[nColorStart].substring(5,7));
 
   redCurrent = redStart;
   greenCurrent = greenStart;
   blueCurrent = blueStart;
 
   redEnd = parseInt("0x"+colors[nColorEnd].substring(1,3));
   greenEnd = parseInt("0x"+colors[nColorEnd].substring(3,5));
   blueEnd = parseInt("0x"+colors[nColorEnd].substring(5,7));
 
   nColorStart++;
   nColorEnd++;
   if (nColorStart &gt;= colors.length) 
   {
      nColorStart = 0;
   }
   if (nColorEnd &gt;= colors.length) 
   {
      nColorEnd = 0;
   }
   animateColor();
}
function animateColor() 
{
   redCurrent = redCurrent-((redStart-redEnd)/nSpeed);
   greenCurrent = greenCurrent-((greenStart-greenEnd)/nSpeed);
   blueCurrent = blueCurrent-((blueStart-blueEnd)/nSpeed);
 
   if (redCurrent&lt;0) { redCurrent=0 } 
   if (redCurrent&gt;255) {redCurrent=255}
   if (greenCurrent&lt;0) {greenCurrent=0}
   if (greenCurrent&gt;255) {greenCurrent=255}
   if (blueCurrent&lt;0) {blueCurrent=0}
   if (blueCurrent&gt;255) {blueCurrent=255}
 
   if (nStep&lt;=nSpeed) 
   {
      var red1 = hexArray[Math.floor(redCurrent/16)];
      var red2 = hexArray[Math.floor(redCurrent)%16];
      var green1 = hexArray[Math.floor(greenCurrent/16)];
      var green2 = hexArray[Math.floor(greenCurrent)%16];
      var blue1 = hexArray[Math.floor(blueCurrent/16)];
      var blue2 = hexArray[Math.floor(blueCurrent)%16];
 
      document.body.style.background = "#"+red1+red2+green1+green2+blue1+blue2;
 
      nStep++;
      rainbowTimer = setTimeout("animateColor()", 50);
    } 
    else 
    {
       clearTimeout(rainbowTimer);
       nStep = 1;
       rainbowTimer = setTimeout("getNextColor()", nPause);
    }
}
window.onload = getNextColor;

2. carilah </head> pada script website anda, lalu masukkan script berikut sebelum </head>

&lt;script src="rainbowbg.js"&gt;&lt;/script&gt;

3. dan terakhir, simpan file website anda.

Catatan:

Jika ingin mengubah kecepatan perubahan warna ubah pada "var nSpeed = 50;" atau pada text berkotak biru.

Semakin sedikit speed yang anda masukkan, perubahan warna semakin cepat. semakin banyak speed yang anda masukkan semakin lambat perubahan warnanya.

Perubahan tercepat = 0

Perubahan terlambat = > 1000

Refferensi:

1. http://www.diskusiweb.com/discussion/45653/tutorial-cara-membuat-rainbow-background-dengan-javascript

Do it !

Saturday, January 11, 2014

Membuat Rainbow Background Pada website

No comments:

Post a Comment

About Me