Anasayfa / Web Tasarım / Javascript ile Sitenizin Arka Planına Havai Fişekler Koyun

Javascript ile Sitenizin Arka Planına Havai Fişekler Koyun

 Merhaba arkadaşlar basit bir hazır kodu kullanarak sitemizin arka planında havai fişekler patlamasını sağlayacağız.

Html, Css ve Javascript kullanarak bu işlemi gerçekleştirebiliriz.

Önizlemesini Görmek İçin:

Canlı Demo Görmek İçin Tıklayınız.

Kod:

<html>
<head>
<title>ASerdar.Com – Kişisel Web Sitesi</title>
</head>
<body style=”background-color:#000;”>
<script language=”JavaScript”>

<!– IE4+, NS4+, NS6 Fireworks script by kurt.grigg@virgin.net

CL=new Array(‘#ff0000′,’#00ff00′,’#ffffff’,’#ff00ff’,’#ffa500′,’#ffff00′,’#00ff00′,

‘#ffffff’,’#ff00ff’)

CL2=new Array(‘#ffa500′,’#00ff00′,’#FFAAFF’,’#fff000′,’#fffffF’)

Xpos=130;

Ypos=130;

I=’#00ff00′;

C=0;

S=5;

H=null;

W=null;

Y=null;

NS4=(document.layers);

NS6=(document.getElementById&&!document.all);

IE4=(document.all);

A=14;

E=120;

L=null;

if (NS4){

for (i=0; i < A; i++)

document.write(‘<LAYER NAME=”nsstars’+i+'” TOP=0 LEFT=0 BGCOLOR=’+I+’ CLIP=”0,0,2,2″></LAYER>’);

}

if (NS6){

window.document.body.style.overflow=’hidden’;

for (i=0; i < A; i++)

document.write(‘<div id=”ns6stars’+i+'” style=”position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:’+I+'”></div>’);

}

if (IE4){

document.write(‘<div id=”ie” style=”position:absolute;top:0px;left:0px”><div style=”position:relative”>’);

for (i=0; i < A; i++)

document.write(‘<div id=”iestars” style=”position:absolute;top:0;left:0;width:2px;height:2px;background:’+I+’;font-size:2px”></div>’);

document.write(‘</div></div>’);

}

function Fireworks(){

H=(NS4||NS6)?window.innerHeight:window.document.body.clientHeight;

W=(NS4||NS6)?window.innerWidth:window.document.body.clientWidth;

Y=(NS4||NS6)?window.pageYOffset:window.document.body.scrollTop;

for (i=0; i < A; i++){

if (IE4)L=iestars[i].style;

if (NS4)L=document.layers[“nsstars”+i];

if (NS6)L=document.getElementById(“ns6stars”+i).style;

var F=Math.floor(Math.random()*CL.length);

var RS=Math.round(Math.random()*2);

L.top = Ypos + E*Math.sin((C+i*5)/3)*Math.sin(C/100)

L.left= Xpos + E*Math.cos((C+i*5)/3)*Math.sin(C/100)

if (C < 110){

if (NS4){L.bgColor=I;L.clip.width=1;L.clip.height=1}

if (IE4||document.getElementById)

{L.background=I;L.width=1;L.height=1;L.fontSize=1}

}

else{

if (NS4){L.bgColor=CL[F];L.clip.width=RS;L.clip.height=RS}

if (IE4||document.getElementById){L.background=CL[F];L.width=

RS;L.height=RS;L.fontSize=RS}

}

}

if (C > 220){

C=0;

var NC=Math.floor(Math.random()*CL2.length);

I=CL2[NC];

E=Math.round(100+Math.random()*50);

Ypos = E+Math.round(Math.random()*(H-(E*2.2)))+Y;

Xpos = E+Math.round(Math.random()*(W-(E*2.2)));

}

C+=S;

setTimeout(“Fireworks()”,10);

}

Fireworks();

// –>

</script>
</body>
</html>

Bir önceki yazımız olan Tasarımlarınız İçin Uyumlu Renkler başlıklı makalemizde Flat renkler, renk kodları ve uyumlu renk seçimleri hakkında bilgiler verilmektedir.

İlginizi Çekebilir

Uyumlu Renkler

Tasarımlarınız İçin Uyumlu Renkler

Gerek web tasarım, gerekse grafik çalışmalarınız için uyumlu renk kullanımına yardımcı olan bazı yardımcı siteleri …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir