DHTML - Schneefall-Maus-Trailer

Schneefall mit JavaScript als Maustrailer - ist nur als DHTML-Lösung möglich. Das Schneebild kann eine gif-Datei sein.

	Position in der html-Datei: head-Bereich
<script type="text/javascript"> <!-- /* Written by: * Terry Yuen. * Works inspired by Tendertron cartoons. * "This one's for the kids!" / var ITEM_COUNT = 6; //number of flakes visible per time var ITEM_W = 20; //width of a single flake var ITEM_H = 20; //height of a single flake var ITEM_SRC = "js/dhtml_cursor_schneemaustrailer.gif"; var ITEM_STAGES = 4; //number of life stages for a single flake. (i.e., number of states on the "star.gif") var ITEM_TRAVEL = 20; //number of times to move a flake before disappearing (Note: PIXEL MOVED = ITEM_TRAVEL ITEM_INCREMENT) var ITEM_INCREMENT = 4; //distance to move a flake on each loop var ITEM_SPEED = 50; //time delay in milliseconds before looping (def: 40) // END CONFIGURABLE CONSTANTS var IE_ENGINE = (document.all) ? true : false; var NS_ENGINE = (document.layers) ? true : false; var animatorThread = null; // To prevent a new flake from being created // on each loop time, we give it a sleep counter // that increments. var sprawnSleeping = 0; // Stores the position of mouse. var mousePos = new Array(2); mousePos[0] = 0; mousePos[1] = 0; // Stores previous positions of mouse. // So that we don't create a flake when // the mouse hasn't moved. var oldMousePos = new Array(2); oldMousePos[0] = 0; oldMousePos[1] = 0; // A table of flake positions and information. var trailMatrix = new Array(ITEM_COUNT); for(var i=0; i<trailMatrix.length; i++) { trailMatrix[i] = new Array(5); trailMatrix[i][0] = 0; trailMatrix[i][1] = 0; trailMatrix[i][2] = 0; trailMatrix[i][3] = ITEM_STAGES; trailMatrix[i][4] = "mouseTrailer_" + i; document.writeln((IE_ENGINE) ? '<div id="' + trailMatrix[i][4] + '" style="position:absolute; width:'+ITEM_W+'px; height:'+ITEM_H+'px; visibility:hidden;"><img src="'+ITEM_SRC+'" border="0"></DIV>' : (NS_ENGINE) ? '<layer id="' + trailMatrix[i][4] + '" position="absolute" width='+ITEM_W+' height='+ITEM_H+' visible="hide"><img src="'+ITEM_SRC+'" border="0"></LAYER>' : ""); } function storeMousePos(e) { mousePos[0] = (IE_ENGINE) ? event.clientX+document.body.scrollLeft : (NS_ENGINE) ? e.pageX : 0; mousePos[1] = (IE_ENGINE) ? event.clientY+document.body.scrollTop : (NS_ENGINE) ? e.pageY : 0; } function sprawnNewTrail() { if(oldMousePos[0] != mousePos[0] \|\| oldMousePos[1] != mousePos[1]) { var temp = trailMatrix[trailMatrix.length-1][4]; for(var i=trailMatrix.length-1; i>0; i--) { trailMatrix[i][0] = trailMatrix[i-1][0]; trailMatrix[i][1] = trailMatrix[i-1][1]; trailMatrix[i][2] = trailMatrix[i-1][2]; trailMatrix[i][3] = trailMatrix[i-1][3]; trailMatrix[i][4] = trailMatrix[i-1][4]; } trailMatrix[0][0] = mousePos[0]; trailMatrix[0][1] = mousePos[1]; trailMatrix[0][2] = ITEM_TRAVEL; trailMatrix[0][3] = ITEM_STAGES; trailMatrix[0][4] = temp; //id for trailer layer } oldMousePos[0] = mousePos[0]; oldMousePos[1] = mousePos[1]; } function animateTrail() { for(var i=0; i<trailMatrix.length; i++) { if(trailMatrix[i][2] > 0) { trailMatrix[i][1] += ITEM_INCREMENT; trailMatrix[i][2]--; trailMatrix[i][3] = Math.ceil((trailMatrix[i][2] * ITEM_STAGES) / ITEM_TRAVEL); updateTrail(trailMatrix[i][4], trailMatrix[i][0], trailMatrix[i][1], trailMatrix[i][3]); } else { hideTrail(trailMatrix[i][4]); } } sprawnSleeping++; if(sprawnSleeping >= 2) { //We create a new flake every 2 loops sprawnSleeping = 0; sprawnNewTrail(); } } function updateTrail(obj, x, y, stage) { var imgTop = (ITEM_STAGES - stage) * ITEM_H; if(IE_ENGINE) { document.all[obj].style.clip = "rect("+imgTop +" "+ ITEM_W +" "+ (imgTop+ITEM_H)+" 0)"; document.all[obj].style.left = x; document.all[obj].style.top = y - imgTop; document.all[obj].style.visibility = "visible"; } else if(NS_ENGINE) { document.layers[obj].clip.top = imgTop; document.layers[obj].clip.bottom = imgTop + ITEM_H; document.layers[obj].left = x; document.layers[obj].top = y - imgTop; document.layers[obj].visibility = "show"; } } function hideTrail(obj) { if(IE_ENGINE) { document.all[obj].style.visibility = "hidden"; } else if(NS_ENGINE) { document.layers[obj].visibility = "hide"; } } function inits() { if(NS_ENGINE)document.captureEvents(Event.MOUSEMOVE); if(IE_ENGINE \|\| NS_ENGINE) { document.onmousemove = storeMousePos; animatorThread = setInterval("animateTrail()", ITEM_SPEED); } } function end() { if(animatorThread != null) { clearInterval(animatorThread); animatorThread = null; } } //--> </script>

Schneebild Es ist nur dieses eine Bild links erforderlich. Per JavaScript (PIXEL MOVED) wird nur jeweils ein Ausschnitt angezeit, so dass es scheint, als zerfalle der Schnee, während sich gleichzeitig der Bildausschnitt vom Cursor weg nach unten bewegt - wie fallender Schnee.

Auf dunkelblauem Hintergrund sieht das Ganze besser aus: Porzellanmarken der Manufaktur Kalk-Köln & Eisenberg
Schneefall auf der Seite ? Bei Interesse: dhtml_snowfall_e.html.

Quelle: www.web-toolbox.net/webtoolbox/mauszeiger/schnee/mauszeiger-schnee.htm Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten