« »

When used with a starry type background image, this script gives the effect of randomly 'twinkling' stars.

Label: Twinkling Star Background

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
Files
CSS
JavaScript
Print

stars.jpg

Copy All x2

<style type="text/css">

body{
background-color:black;
background-image:url('stars.jpg');
font-size:10pt;
color:white;
font-family:sans-serif;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
var starblink=250;            // LENGTH OF TIME STARS TWINKLE ON IN MILLISECONDS
var stardelay=2;               // DELAY BETWEEN TWINKLES IN SECONDS

//  ENTER THE COLORS OF THE STARS IN THE ARRAY BELOW SEPERATED BY COMMAS.
//  YOU CAN USE VALID COLOR NAMES OR HEX COLOR TRIPLETS.
var starcolors=new Array( '#C8C3C2' , '#F304F6' , '#3806F4' , '#E5E201' );

// **** DO NOT EDIT BELOW HERE **** //

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

var windowW, windowH,star;

function getwindowdims(){
windowW=(ie4||ie5)? document.body.clientWidth: window.innerWidth;
windowH=(ie4||ie5)?  document.body.clientHeight :window.innerHeight;
}

function twinkle(phs,c){
var x,y;
if(phs==2){
x=Math.floor(Math.random()*windowW-2);
y=Math.floor(Math.random()*windowH-2);
if(ns4){
star.visibility="hide"
star.moveTo(x,y);
star.bgColor=starcolors[c];
}else{
star.style.visibility="visible";
star.style.left=x+'px';
star.style.top=y+'px';
star.style.backgroundColor=starcolors[c];
}
setTimeout('twinkle(1,'+(Math.floor(Math.random()*starcolors.length))+')', stardelay);
}else{
(ns4)?star.visibility="show" : star.style.visibility="visible";
setTimeout('twinkle(2,'+c+')',starblink);
}}

document.write( (ns4)? '<layer name="star" left="0" top="0" width="2" height="2" bgcolor="white" visibility="hide"></layer>' : '<div id="star" style="position:absolute; width:2px; height:2px; top:0px; left:0px; font-size:2px; background-color:white; visibility:hidden"></div>');

window.onload=function(){
star=(ns4)?document.layers['star']:(ie4)? document.all['star']:document.getElementById('star');
getwindowdims();
window.onresize=getwindowdims;
twinkle(2,0);
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (1)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Brian Gosselin [more]
26,827
0
3
1
2.61 KBytes

JavaScript Twinkling Star Background

4.3/5 3 votes / 26,827 previews / 0 comment 30/01/2007 When used with a starry type background image, this script gives the effect of randomly 'twinkling' stars....JavaScript Twinkling Star Background - Twinkling Star Background

Let's be first member to do this

maximus.augustus minhtam10x ttv1 HoaiAn

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Twinkling Star Background

Label: Twinkling Star Background (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Twinkling Star Background