Flying Faeries
Lots of folks have been asking, how do you do that?
- (And, a
few didn't bother to ask.)
- So, here's the script you've all been asking for.
- Copy this and past it into your webpage's body,
- and please don't use the script on the Very Faery pages.
- Thanks! Enjoy!
~ The Very Faery Shoppe's Webmaster
<!-- This script has been in the http://www.javascripts.com
Javascript Public Library and comes to you by way of The Very Faery
Shoppe at http://www.veryfaery.com! -->
<!-- Note that though this material may have been in a public depository,
certain author copyright restrictions may apply. -->
<html>
<head>
<title>My animated dots Script - by Josh Franzen</title>
</head>
<body bgcolor="#000000">
<layer NAME="a" BGCOLOR="#FFff00" CLIP="0,0,2,2"></layer>
<layer NAME="b" BGCOLOR="#FF0000" CLIP="0,0,3,3"></layer>
<layer NAME="c" BGCOLOR="#FF00ff" CLIP="0,0,3,3"></layer>
<layer NAME="d" BGCOLOR="#FFFFFF" CLIP="0,0,2,2"></layer>
<layer NAME="e" BGCOLOR="#000000" CLIP="0,0,3,3"></layer>
<layer NAME="f" BGCOLOR="#FFBbff" CLIP="0,0,2,2"></layer>
<layer NAME="g" BGCOLOR="#00ff00" CLIP="0,0,3,3"></layer>
<layer NAME="h" BGCOLOR="#FFB518" CLIP="0,0,2,2"></layer>
<layer NAME="i" BGCOLOR="#0000ff" CLIP="0,0,1,1"></layer>
<layer NAME="j" BGCOLOR="#bb22ff" CLIP="0,0,2,2"></layer>
<layer NAME="k" BGCOLOR="#bbbbff" CLIP="0,0,5,5"></layer>
<layer NAME="l" BGCOLOR="#bbccbb" CLIP="0,0,2,2"></layer>
<script LANGUAGE="JavaScript">
// <!--
// By: Josh Franzen ,1998
// Use this Script freely but please do not remove
// this header or any of the codeing for this script.
// you can change the color and size of the dots
// with the above layer tags.
var userAgent=navigator.appName + " " + navigator.appVersion;
var agentInfo=userAgent.substring(0, 12);
if(agentInfo >= "Netscape 4.0")
{
window.captureEvents(Event.MOUSEMOVE);
// Logo animation
var yBase = window.innerHeight/2;
var xBase = window.innerWidth/2;
var delay = 15;
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 < 12 ; j++ ) {
document.layers[j].top = Ypos +
Math.cos((20*Math.sin(currStep/(20+j)))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep
+ j*25)/10);
document.layers[j].left =Xpos +
Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/(10+j))+0.2)*Math.cos((currStep
+ j*25)/10);
}
currStep += step;
setTimeout("animateLogo()", delay) ;
}
animateLogo()
}
// -->
</script>
</body>
</html>
<!-- Tommy Raven (Min) says Moo. -->
Here's another one:
<!-- This script has been in the http://www.javascripts.com Javascript
Public Library and comes to you by way of The Very Faery Shoppe at http://www.veryfaery.com!
-->
<!-- Note that though this material may have been in a public depository,
certain author copyright restrictions may apply. -->
<html>
<head>
<title>GLITTERY VORTEX THAT FOLLOWS MOUSE</title>
</head>
<body>
<LAYER NAME="a" LEFT=10 TOP=10 VISIBILITY=SHOW
BGCOLOR="#4682B4" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="b" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#708090"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="c" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#C0C0C0"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="d" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#4682B4"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="e" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#C0C0C0"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="f" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#708090"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="g" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#239534"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="h" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#35B334"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="i" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#3L4284"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="j" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#C07834"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="k" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#534323"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="l" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#342574"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="m" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#4659D5"
CLIP="0,0,2,2"></LAYER>
<LAYER NAME="n" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#9380B4"
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((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep
+ j*25)/10);
document.layers[j].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep
+ j*25)/10);
}
currStep += step;
setTimeout("animateLogo()", delay);
}
animateLogo();
}
// End -->
</script><br>
Simba says Roar.<br>
</body>
</html>
<!-- Simba says Roar. -->
