Cara Sederhana Membuat Background Berwarna dan bergerak
Membuat Background berwarna dan gerak ini tidak sulit kok, hanya tinggal copy saja koding di bawah ini terus paste kan aja di HTML/Javascrib kamu.. Untuk melihat contoh yang udah jadi lihat saja backgroung milik saya, warnanya background nya bergerakkan. mantap bukan.. Andamau mencobanya.. Silahkan. Langkah yang pertama yaitu Pergi ke rancangan tambah add html/javascript.Masukkan Copy paste kode dibawah ini..
<script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
Selesai lalu Simpan.
coba lihat hasilnya sekarang Background sobat Bergerak Dan Berwarna.
selamat mencoba :)
Hehehe jangan Lupa Command nya ea Sobat , tulis dibawah >....>>>>>
Cara Sederhana Membuat Background Berwarna dan bergerak
2011-12-19T10:54:00-08:00
Rytha Teguh Aza
Cara Membuat Background bergerak dan warna|
Subscribe to:
Posting Komentar (Atom)
