Tutorial Javascript – Multicolor Gradient Background ~ Backup

Skrip yang satu ini adalah salah satu skrip yang digemari. Skrip javascript ini akan membuat background atau latar belakang website Anda mempunyai warna yang berganti-ganti secara otomatis dengan gradasi yang fullcolor. Website Anda akan terlihat lebih menarik dan interaktif. Cara menerapkannya sangat mudah, caranya adalah paste skrip berikut diantara tag <head> dan </head> pada source code website Anda.

Skrip:

// CREDITS:

// Gradient Background Fader, Multicolor

// By Peter Gehrig

// Permission given to use the script provided that this notice remains as is.

// Additional scripts can be found at http://www.24fun.com

// info@24fun.com

// 11/27/2003

// IMPORTANT:

// If you add this script to a script-library or script-archive

// you have to add a highly visible link to

// http://www.24fun.com on the webpage

// where this script will be featured

///////////////////////////////////////////////////////////////////////////

// CONFIGURATION STARTS HERE

///////////////////////////////////////////////////////////////////////////

// Select the colors (hexadecimal triplet value required)

// Please note that at least 3 colors are required!

var colors=new Array("#FFFF00","#00FFFF","#5fc700","#854b00","#76e07c","#FFAC00","#FFFF66","#ff0000","#FFFFFF","#850044","#B56AFF","#56B1FF")

// Set pause between colors (seconds)

var pausebetweencolors=2

// What type of gradient should be applied Internet Explorer 5x or higher?

// Set "none" or "horizontal" or "vertical"

var gradient_effect="horizontal"

// Set speed (higher=slower)

var speed=20

// How many times shall the effect be repeated?

// Add a value between 1 and 9999999

var i_loopmax=1000

///////////////////////////////////////////////////////////////////////////

// CONFIGURATION ENDS HERE

///////////////////////////////////////////////////////////////////////////

// do not edit code below this line

var pausesteps=40

var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var redcol_1

var redcol_2

var redcol_1_b

var redcol_2_b

var greencol_1

var greencol_2

var greencol_1_b

var greencol_2_b

var bluecol_1

var bluecol_2

var bluecol_1_b

var bluecol_2_b

var rgbredfrom

var rgbgreenfrom

var rgbbluefrom

var rgbredto

var rgbgreento

var rgbblueto

var rgbrednow

var rgbgreennow

var rgbbluenow

var rgbredfrom_b

var rgbgreenfrom_b

var rgbbluefrom_b

var rgbredto_b

var rgbgreento_b

var rgbblueto_b

var rgbrednow_b

var rgbgreennow_b

var rgbbluenow_b

var colorhexafrom

var colorhexato

var i_step=1

var i_loop=0

var i_colorsA=0

var i_colorsB=1

var i_colorsC=1

var i_colorsD=2

pausebetweencolors*=1000

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

function translateintorgb() {

var hexa=colors[i_colorsA]

var hexared=hexa.substring(1,3)

var hexagreen=hexa.substring(3,5)

var hexablue=hexa.substring(5,7)

rgbredfrom=parseInt("0x"+hexared)

rgbgreenfrom=parseInt("0x"+hexagreen)

rgbbluefrom=parseInt("0x"+hexablue)

rgbrednow=rgbredfrom

rgbgreennow=rgbgreenfrom

rgbbluenow=rgbbluefrom

var hexa=colors[i_colorsB]

var hexared=hexa.substring(1,3)

var hexagreen=hexa.substring(3,5)

var hexablue=hexa.substring(5,7)

rgbredto=parseInt("0x"+hexared)

rgbgreento=parseInt("0x"+hexagreen)

rgbblueto=parseInt("0x"+hexablue)

var hexa=colors[i_colorsC]

var hexared=hexa.substring(1,3)

var hexagreen=hexa.substring(3,5)

var hexablue=hexa.substring(5,7)

rgbredfrom_b=parseInt("0x"+hexared)

rgbgreenfrom_b=parseInt("0x"+hexagreen)

rgbbluefrom_b=parseInt("0x"+hexablue)

rgbrednow_b=rgbredfrom_b

rgbgreennow_b=rgbgreenfrom_b

rgbbluenow_b=rgbbluefrom_b

var hexa=colors[i_colorsD]

var hexared=hexa.substring(1,3)

var hexagreen=hexa.substring(3,5)

var hexablue=hexa.substring(5,7)

rgbredto_b=parseInt("0x"+hexared)

rgbgreento_b=parseInt("0x"+hexagreen)

rgbblueto_b=parseInt("0x"+hexablue)

i_colorsA++

i_colorsB++

i_colorsC++

i_colorsD++

if (i_colorsA>=colors.length) {i_colorsA=0}

if (i_colorsB>=colors.length) {i_colorsB=0}

if (i_colorsC>=colors.length) {i_colorsC=0}

if (i_colorsD>=colors.length) {i_colorsD=0}

changefromto()

}

function changefromto() {

rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)

rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)

rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)

rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)

rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)

rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)

if (rgbrednow>255) {rgbrednow=255}

if (rgbrednow<0) {rgbrednow=0}

if (rgbgreennow>255) {rgbgreennow=255}

if (rgbgreennow<0) {rgbgreennow=0}

if (rgbbluenow>255) {rgbbluenow=255}

if (rgbbluenow<0) {rgbbluenow=0}

if (rgbrednow_b>255) {rgbrednow_b=255}

if (rgbrednow_b<0) {rgbrednow_b=0}

if (rgbgreennow_b>255) {rgbgreennow_b=255}

if (rgbgreennow_b<0) {rgbgreennow_b=0}

if (rgbbluenow_b>255) {rgbbluenow_b=255}

if (rgbbluenow_b<0) {rgbbluenow_b=0}

if (i_step<=speed) {

redcol_1 = hexc[Math.floor(rgbrednow/16)];

redcol_2 = hexc[Math.floor(rgbrednow)%16];

greencol_1 = hexc[Math.floor(rgbgreennow/16)];

greencol_2 = hexc[Math.floor(rgbgreennow)%16];

bluecol_1 = hexc[Math.floor(rgbbluenow/16)];

bluecol_2 = hexc[Math.floor(rgbbluenow)%16];

redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];

redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];

greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];

greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];

bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];

bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];

var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2

var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b

if (ie5 && gradient_effect!="none") {

if (gradient_effect=="horizontal") {var gr_effect=1}

if (gradient_effect=="vertical") {var gr_effect=0}

document.body.style.filter=

"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"

}

else {

document.bgColor=backcolor

}

i_step++

var timer=setTimeout("changefromto()",pausesteps);

}

else {

clearTimeout(timer)

i_step=1

i_loop++

if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}

}

if (browserok) {

window.onload=translateintorgb

}

</script>

Posted in: Javascript

Backup

Kotak Pesan

Minggu, 20 Maret 2011

Tutorial Javascript – Multicolor Gradient Background

0 komentar:

Posting Komentar

Label

Arsip Blog

Categories