JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Stars

(Requires Netscape 4.0 or better) Probably one of the coolest "layers" effects I've seen, stars actually float around the screen and follow your mouse cursor! Looks great on a black or white background, try it with both! Incredible!


Insert into <HEAD>
<HEAD> <!-- Original: freeware.de --> <!-- Web Site: http://freeware.de --> <style type="text/css"> <!-- Begin CSS #a { position: absolute; top: 10px; left: 10px; visibility: visible } #b { position: absolute; top: 10px; left: 10px; visibility: visible } #c { position: absolute; top: 10px; left: 10px; visibility: visible } #d { position: absolute; top: 10px; left: 10px; visibility: visible } #e { position: absolute; top: 10px; left: 10px; visibility: visible } #f { position: absolute; top: 10px; left: 10px; visibility: visible } #g { position: absolute; top: 10px; left: 10px; visibility: visible } End CSS --> </style> </HEAD>

Insert into <BODY>
<BODY> <LAYER NAME="a" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="b" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF8000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="c" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,2,2"></LAYER> <LAYER NAME="d" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00FF00" CLIP="0,0,2,2"></LAYER> <LAYER NAME="e" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000FF" CLIP="0,0,2,2"></LAYER> <LAYER NAME="f" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,2,2"></LAYER> <LAYER NAME="g" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFFFF" CLIP="0,0,2,2"></LAYER> <script language="JavaScript1.2"> <!-- Begin var ns=document.layers ? 1 : 0; if (ns) { window.captureEvents(Event.MOUSEMOVE); var yBase = 200; var xBase = 200; var delay = 10; var yAmpl = 10; var yMax = 40; var step = .2; var ystep = .5; var currStep = 0; var tAmpl=1; var Xpos = 50; var Ypos = 50; var j = 0; function MoveHandler(evnt) { Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = MoveHandler; function animateLogo() { yBase = window.innerHeight/4 ; xBase = window.innerWidth/4; for ( j = 0 ; j < 7 ; j++ ) { document.layers[j].top = Ypos + Math.cos((20Math.sin(currStep/20))+j70)yBase(Math.sin(10+currStep/10)+0.2)Math.cos((currStep + j25)/10); document.layers[j].left =Xpos + Math.sin((20Math.sin(currStep/20))+j70)xBase(Math.sin(10+currStep/10)+0.2)Math.cos((currStep + j25)/10); } currStep += step; setTimeout("animateLogo()", delay); } animateLogo(); } // End --> </script>

Other Options