Stars moving in background

Written by @kerixa 21 August 2012

Using animating elements for the background makes your website more attractive and the visitors spend more time on your website. In this code, an animated background with stars is provided for you, which in addition to being responsive, doubles the beauty of your website. When the mouse pointer goes near a star, it becomes bigger!

Code Snippet:

                                                
                                                <!-- this script is provided by http://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<FONT face=Tahoma color=white>
<!-- STEP ONE: Insert the onLoad event handler into your BODY tag  -->

<BODY BGCOLOR="#000000" onLoad="fly()">

<!-- STEP TWO: Paste this code into the BODY of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
SmallStars = 30; 
LargeStars = 10;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns) {
for (i = 0; i < SmallStars; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
for (i = 0; i < LargeStars; i++) {
document.write("<LAYER NAME='ln"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFFF' CLIP='0,0,2,2'></LAYER>");
   }
}
else {
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < SmallStars; i++) {
document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>');
}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < LargeStars; i++) {
document.write('<div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
document.write('</div>');
}
WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i = 0; i < SmallStars; i++) {
SmallYpos[i] = Math.round(Math.random() * WinHeight);
SmallXpos[i] = Math.round(Math.random() * WinWidth);
Smallspeed[i]= Math.random() * 5 + 1;
}
for (i = 0; i < LargeStars; i++) {
LargeYpos[i] = Math.round(Math.random() * WinHeight);
LargeXpos[i] = Math.round(Math.random() * WinWidth);
Largespeed[i] = Math.random() * 10 + 5;
}
function fly() {
var WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < LargeStars; i++) {
LargeXpos[i] -= Largespeed[i];
if (LargeXpos[i] < -10) {
LargeXpos[i] = WinWidth;
LargeYpos[i] = Math.round(Math.random() * WinHeight);
Largespeed[i] = Math.random() * 10 + 5;
}
if (ns) {
document.layers['ln'+i].left = LargeXpos[i];
document.layers['ln'+i].top = LargeYpos[i] + hscrll;
}
else {
li[i].style.pixelLeft = LargeXpos[i];
li[i].style.pixelTop = LargeYpos[i] + hscrll;
   }
}
for (i = 0; i < SmallStars; i++) {
SmallXpos[i] -= Smallspeed[i];
if (SmallXpos[i] < -10) {
SmallXpos[i] = WinWidth;
SmallYpos[i] = Math.round(Math.random()*WinHeight);
Smallspeed[i] = Math.random() * 5 + 1;
}
if (ns) {
document.layers['sn'+i].left = SmallXpos[i];
document.layers['sn'+i].top = SmallYpos[i]+hscrll;
}
else {
si[i].style.pixelLeft = SmallXpos[i];
si[i].style.pixelTop = SmallYpos[i]+hscrll;
   } 
}
setTimeout('fly()', 10);
}
//  End -->
</script>
<!-- Script Size:  3.79 KB -->
</body><a target='_blank' href='http://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: john.mav4, gech, ben.reed@laingbuisson.com, javaboy, Estevan Belo
advertisement 2