Forum - Schneeflocken im Forum mit JavaScript und Marquee

<style>
.snowflake {
position:absolute;
top:0px;
left:0px;
color:#CCCCCC; /* Farbe für Alternativtext */
}
</style>
 
<script>
var snowProperties = {
	// Adresse der Schneeflocken-Grafik:
	flakeImage	: 'https://files.homepagemodules.de/b123484/a_47_4cadcb5d.png',
	// Alternativ-Text, falls Grafik nicht gefunden:
	flakeText	: '*',
 
	// maximale Abweichung von der Standard-Bildgröße in Prozent [0..1]
	// z.B.: 0 = keine, 50 = +-50%, 100 = +-100% (doppelt so groß bzw. nicht mehr zu sehen)
	deviation	: 50,
 
	flakeWidth	: 20,									// Breite einer Schneeflocke
	flakeHeight	: 23,									// Höhe einer Schneeflocke
 
	animSpeed	: 75,									// Intervall für Ausführung der Animations in ms
	stepDown	: 2,									// Pixel nach unten pro Animations-Schritt
	amplitude	: 10,									// maximale Pendelbewegungen seitwärts in Pixeln
	period		: 12.5,									// Länge für eine komplette Pendelbewegung
 
	amountStart	: Math.ceil(window.innerWidth*0.0025),	// Anzahl der zu ladenden Schneeflocken pro Zeile
	snowLine	: Math.round(window.innerHeight * 0.8),	// maximale Höhe, welche die Schneeflocken zurücklegen
	sizeBottom	: 2										// minimale Größe einer Schneeflocke am Ende in Prozent
}
 
function snowFlake() {
	var that = this;
 
	this.deviation	= ((Math.random() * 2) - 1) * (snowProperties.deviation/100);
	this.width		= snowProperties.flakeWidth * (1 + this.deviation);
	this.height		= snowProperties.flakeHeight * (1 + this.deviation);
	
	this.posX		= Math.floor((Math.random() * (window.innerWidth - this.width - Math.abs(this.deviation) ) ) + 1);
	this.posY		= ((-1) * this.height) - Math.floor((Math.random() * (2*this.height) ) + 1);
 
	this.decrWidth	= ( this.width	- ( this.width	* (snowProperties.sizeBottom/100) ) )	// (Anfangsbreite - Endbreite)
						/ (snowProperties.snowLine - (this.height * 3));
	this.decrHeight	= ( this.height	- ( this.height	* (snowProperties.sizeBottom/100) ) )	// (Anfangshöhe - Endhöhe)
						/ (snowProperties.snowLine - (this.height * 3));
 
	this.flake;
	this.init = function() {
		// HTML-Element für Schneeflocke erzeugen:
		this.flake	= document.createElement('img');
		// Attribute des HTML-Elementes initialisieren:
		this.flake.setAttribute( 'name',	'snowflake');
		this.flake.setAttribute( 'alt',		snowProperties.flakeText);
		this.flake.setAttribute( 'class',	'snowflake');
		this.flake.setAttribute( 'src',		snowProperties.flakeImage);
		// Element in Seite einbinden:
		document.getElementsByTagName('body')[0].appendChild(this.flake);
 
		this.flake.style.width	= this.width	+ 'px';
		this.flake.style.height	= this.height	+ 'px';
		this.flake.style.top	= this.posY		+ 'px';
		this.flake.style.left	= this.posX		+ 'px';
	}
	this.init();
 
	this.remove = function() {
		document.getElementsByTagName('body')[0].removeChild(this.flake);
	}
 

	this.fallDown = function() {
		this.posY				+= snowProperties.stepDown;
		this.flake.style.top	= this.posY + 'px';
 
		var newPosition			= parseFloat(this.posX) +
									snowProperties.amplitude *
									Math.sin( (1/snowProperties.period) * (this.posY - this.deviation) );
		this.flake.style.left	= newPosition + 'px';
 
		this.width				-= this.decrWidth;
		this.height				-= this.decrHeight;
		this.flake.style.width	= this.width	+ 'px';
		this.flake.style.height	= this.height	+ 'px';
	}
}
 

function snowFall() {
	var that = this;
 
	this.flakes;
 
	var interval;
	var timeout;
 
	var loadRange;
	var loadTimer;
	var totalAmount;
	var countLoaded	= 0;	// Anzahl geladener Schneeflocken
 
	this.init = function() {
		totalAmount = snowProperties.amountStart *
						Math.round( snowProperties.snowLine / (snowProperties.flakeHeight * 1.5 * 2) );
 
		this.flakes = new Array(totalAmount);
		loadRange	= snowProperties.amountStart;	// this.flakes.length * (snowProperties.amountStart/100);
 
		for (var i = 0; i < loadRange; i++) {
			this.flakes[i] = new snowFlake();
			this.flakes[i].flake.style.display = 'none';
			countLoaded = i + 1;
		}
 
		// (Durchschnittliche Fallhöhe bis Bildrand) * (Zeitschritte, die bis dahin vergingen):
		loadTimer = (snowProperties.flakeHeight * 1.5 * 2) * (snowProperties.animSpeed / snowProperties.stepDown);
		timeout = window.setTimeout( function() { that.loadAsync(); }, loadTimer);
	}
	this.init();
 
	this.loadAsync = function() {
		var loadMore = false;
		for (var i = 0; i < loadRange; i++) {
			if ( (countLoaded < this.flakes.length) && (this.flakes[countLoaded] == null) ) {
				this.flakes[countLoaded++] = new snowFlake();
			}
			else {
				break;
			}
			loadMore = true;
		}
		if (loadMore) {
			timeout = window.setTimeout( function() { that.loadAsync(); }, loadTimer);
		}
	}
 
	this.show = function() {
		for (var i = 0; i < this.flakes.length; i++) {
			if (this.flakes[i] != null) {
				this.flakes[i].flake.style.display = 'block';
			}
		}
	}
	this.hide = function() {
		for (var i = 0; i < this.flakes.length; i++) {
			if (this.flakes[i] != null) {
				this.flakes[i].flake.style.display = 'none';
			}
		}
	}
 
	this.startAnimation = function() {
		interval = window.setInterval( function() { that.play(); } , snowProperties.animSpeed);
		this.show();
	}
	this.stopAnimation = function() {
		window.clearInterval(interval);
		this.hide();
	}
 
	this.play = function() {
		for (var i = 0; i < this.flakes.length; i++) {
			if (this.flakes[i] != null) {
				if (this.flakes[i].posY > snowProperties.snowLine) {
					this.flakes[i].remove();			// alte Schneeflocke entfernen
					this.flakes[i] = new snowFlake();	// neue Schneeflocke generieren
}
this.flakes[i].fallDown();
}
}
}
}
 
function letTheSnowFall() {
var fallingSnow = new snowFall();
fallingSnow.startAnimation();
 
//window.setTimeout( function(){ fallingSnow.hide(); },			10000);
//window.setTimeout( function(){ fallingSnow.show(); },			44000);
window.setTimeout( function(){ fallingSnow.stopAnimation(); },	45000); // Dauer der Animation
}
 
window.onload=letTheSnowFall;
</script>
 
 

<marquee direction="down" scrollamount=3 style="background:none;position:fixed; margin-left:10%; top:5%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=4 style="background:none;position:fixed; margin-left:20%; top:20%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=5 style="background:none;position:fixed; margin-left:30%; top:8%; height:30%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=6 style="background:none;position:fixed; margin-left:40%; top:2%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=7 style="background:none;position:fixed; margin-left:50%; top:11%; height:30%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=4 style="background:none;position:fixed; margin-left:60%; top:6%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=2 style="background:none;position:fixed; margin-left:70%; top:12%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=5 style="background:none;position:fixed; margin-left:80%; top:4%; height:30%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee> 
<marquee direction="down" scrollamount=3 style="background:none;position:fixed; margin-left:90%; top:45%; height:50%; width:auto; z-index:99;"><img src="//files.homepagemodules.de/b104774/a_548_793b4fa5.gif"></marquee>