Tuesday, December 8, 2015

Javascript - Mengubah Warna Background Terus Menerus (Effect)

Code Javascript untuk mengubah warna background website secara terus menerus (effect).

Code
//SETTING
var fade_effect=3
var gradient_effect="horizontal"
var speed=60
//SELESAI SETTING

var browserinfos=navigator.userAgent 
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie4||ie5||ns4||ns6||opera

if (fade_effect==1) {
 var darkmax=1
 var lightmax=127
}
if (fade_effect==2) {
 var darkmax=127
 var lightmax=254
}
if (fade_effect==3) {
 var darkmax=1
 var lightmax=254
}
if (fade_effect==4) {
 var darkmax=190
 var lightmax=254
}
if (fade_effect==5) {
 var darkmax=1
 var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var newred
var newgreen
var newblue
var oldred
var oldgreen
var oldblue

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
var oldcolor
var newcolor
var firsttime=true
 
var stepred=1
var stepgreen=1
var stepblue=1

function setrandomcolor() {
 var range=(lightmax-darkmax)
 if (firsttime) {
  newred=Math.ceil(range*Math.random())+darkmax
  newgreen=Math.ceil(range*Math.random())+darkmax
  newblue=Math.ceil(range*Math.random())+darkmax
  firsttime=false
 }
 
 oldred=Math.ceil(range*Math.random())+darkmax
 oldgreen=Math.ceil(range*Math.random())+darkmax
 oldblue=Math.ceil(range*Math.random())+darkmax
 
 stepred=newred-oldred
 if (oldred>newred) {stepred=1}
 else if (oldred<newred) {stepred=-1}
 else {stepred=0}
 
 stepgreen=newgreen-oldgreen
 if (oldgreen>newgreen) {stepgreen=1}
 else if (oldgreen<newgreen) {stepgreen=-1}
 else {stepgreen=0}
 
 stepblue=newblue-oldblue
 if (oldblue>newblue) {stepblue=1}
 else if (oldblue<newblue) {stepblue=-1}
 else {stepblue=0}
 fadebg()
}

function fadebg() {
 if (newred==oldred) {stepred=0}
 if (newgreen==oldgreen) {stepgreen=0}
 if (newblue==oldblue) {stepblue=0}
 newred+=stepred
 newgreen+=stepgreen
 newblue+=stepblue
 
 if (stepred!=0 || stepgreen!=0 || stepblue!=0) {
       redcol_1 = hexc[Math.floor(newred/16)];
      redcol_2 = hexc[newred%16];
   greencol_1 = hexc[Math.floor(newgreen/16)];
       greencol_2 = hexc[newgreen%16];
    bluecol_1 = hexc[Math.floor(newblue/16)];
       bluecol_2 = hexc[newblue%16];
    newcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
  if (ie5 && gradient_effect!="none") {
   if (gradient_effect=="horizontal") {gradient_effect=1}
   if (gradient_effect=="vertical") {gradient_effect=0}
        greencol_1 = hexc[Math.floor(newred/16)];
       greencol_2 = hexc[newred%16];
    bluecol_1 = hexc[Math.floor(newgreen/16)];
        bluecol_2 = hexc[newgreen%16];
     redcol_1 = hexc[Math.floor(newblue/16)];
        redcol_2 = hexc[newblue%16];
   var newcolorCompl="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
   document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolorCompl+", endColorstr="+newcolor+" GradientType="+gradient_effect+")"
  }
  else {
     document.bgColor=newcolor 
  }
  var timer=setTimeout("fadebg()",speed);
    } 
   else {
    clearTimeout(timer)
  newred=oldred
  newgreen=oldgreen
  newblue=oldblue
  oldcolor=newcolor
  setrandomcolor()
   }
}

if (browserok) {
 window.onload=setrandomcolor
}

(Baca juga: Javascript - Membuat Loading Page)

Setting
var fade_effect=
1 untuk efek memudar dari gelap ke sedang
2 untuk efek memudar dari terang ke sedang
3 untuk efek memudar dari sangat gelap ke sangat terang
4 untuk efek memudar dari terang ke sangat terang
5 untuk efek memudar dari gelap ke sangat gelap

var gradient_effect=
pilih "none" atau "horizontal" atau "vertical"

var speed=
pilih 1-1000


Terima kasih
Enjoy your day !



EmoticonEmoticon