It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 21 August 2012
This is a fancy code which moves some colorful stars around your webpage whether it's html or php, it doesn't matter. It works with everything. Try it.
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<script LANGUAGE="JavaScript1.2">
//set Interval between each firework display,
var intervals=2000
var sparksOn = true;
var speed = 25;
var power = 1;
//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var sparksAflyin = false;
var allDivs = new Array(10);
var totalSparks = 0;
//-------------------------------
function initAll(){
if(!ns && !ie){
sparksOn = false;
return;
}
setInterval("firework()",intervals)
if (ns)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
for(dNum=0; dNum<7; ++dNum){
if(ie)
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
}
}
function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset
}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
if(sparksOn){
if(!sparksAflyin){
sparksAflyin=true;
totalSparks=0;
for(var spark=0;spark<=6;spark++){
dx=Math.round(Math.random()*50);
dy=Math.round(Math.random()*50);
moveTo(spark,randomx,randomy,dx,dy);
}
}
}
}
function moveTo(i,tempx,tempy,dx,dy){
if(ie){
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
tempy=document.body.offsetHeight+document.body.scrollTop-80;
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
tempx=document.body.offsetWidth+document.body.scrollLeft-80;
}
if(tempx>-50&&tempy>-50){
tempx+=dx;tempy+=dy;
allDivs[i].left=tempx;
allDivs[i].top=tempy;
dx-=power;dy-=power;
setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
}
else
++totalSparks
if(totalSparks==7){
sparksAflyin=false;
totalSparks=0;
}
}
window.onload=initAll
//End-->
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:Aqua;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:22px; color:red;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:20px; color:blue;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:yellow;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:25px; color:lightgreen;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:20px; color:silver;}
</style>
<p></p>
<div id="sDiv0">
*</div>
<div id="sDiv1">
*</div>
<div id="sDiv2">
*</div>
<div id="sDiv3">
*</div>
<div id="sDiv4">
*</div>
<div id="sDiv5">
*</div>
<div id="sDiv6">
*</div>
</body>
</html>
<a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!