Code: Alles auswählen
<script type="text/javascript" language="javascript">
<!--
////////////////////////////////////////////////////////////////////////
// SnowFlakes-Script (c) 2011, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////
var snowflakes = {
///////////////////////////// configuration ////////////////////////////
// amout of flakes
_amount: 30,
// random colors
_color: ['#AAAACC', '#DDDDFF', '#CCCCDD', '#F3F3F3', '#F0FFFF'],
// random fonts
_type: ['Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS'],
// char used for flake
_flakeChar: '*',
// speed of flakes
_speed: .2,
// minimum flake font size
_minSize: 8,
// maximum flake font size
_maxSize: 22,
// horizontal drift
_drift: 15,
// zIndex of flakes
_zIndex: 20000,
///////////////////////////// private vars /////////////////////////////
_flakes: [],
_bodyWidth: 0,
_bodyHeight: 0,
_range: null,
_count: 0,
_timeout: 20,
_lastInterval: 0,
_eventHandlerResize: window.onresize,
_eventHandlerLoad: window.onload,
////////////////////////////// functions ///////////////////////////////
// start snow
start: function()
{
if (this._eventHandlerLoad != null) this._eventHandlerLoad();
// calculate range
this._range = this._maxSize - this._minSize;
// init window size
this._windowSize();
// add new flakes
while (this._amount > this._flakes.length)
this._createFlake(this._flakes.length);
// start to move snow
this._lastInterval = this._time();
window.setInterval(function() { snowflakes._move(); }, this._timeout);
},
// get current time
_time: function()
{
return +new Date();
},
// return a random number bewtween 0 and range
_random: function(range)
{
return Math.floor(Math.random() * range);
},
// creates a new snowflake
_createFlake: function(i)
{
// select body tag
var insertBody = document.getElementsByTagName('body')[0];
// create span child for flake
var f = document.createElement('div');
f.id = 'flake' + i;
f.style.position = 'absolute';
f.style.left = '0px';
f.style.top = '-' + this._maxSize + 'px';
f.style.color = this._color[this._random(this._color.length - 1)];
f.style.family = this._type[this._random(this._type.length - 1)];
f.style.fontSize = (this._random(this._range) + this._minSize) + 'px';
f.style.zIndex = this._zIndex;
f.innerHTML = this._flakeChar;
insertBody.appendChild(f);
// create array element
this._flakes[i] = {
x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
y: -this._maxSize - this._random(this._bodyHeight),
size: this._random(this._range) + this._minSize,
count: this._random(10000)
};
},
// restart an existing snow flake
_restartFlake: function(i)
{
this._flakes[i] = {
x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
y: -this._maxSize,
size: this._random(this._range) + this._minSize,
count: this._random(10000)
};
},
// move existing flakes
_move: function()
{
// calculate movement factor
var dif = this._time() - this._lastInterval;
this._lastInterval = this._time();
var f = dif * this._speed;
this._count += f / 80;
for (var i = 0; i < this._flakes.length; i++)
{
var flake = this._flakes[i];
flake.y += f * this._speed * this._maxSize / flake.size;
// restart existing flake
if (flake.y + flake.size >= this._bodyHeight)
{
this._restartFlake(i);
continue;
}
var flakeDiv = document.getElementById('flake' + i);
flakeDiv.style.left = Math.floor(flake.x + Math.sin(flake.count + this._count) * this._drift) + 'px';
flakeDiv.style.top = Math.floor(flake.y) + 'px';
}
},
// calculate new positions for all flakes
_windowSize: function()
{
// save old width
var oldWidth = this._bodyWidth;
// get new width and height
this._bodyWidth = this._getWindowWidth() - this._maxSize;
this._bodyHeight = this._getWindowHeight() - this._maxSize;
// calculate correction ratio
var ratio = this._bodyWidth / oldWidth;
// for all flakes
for (var i = 0; i < this._flakes.length; i++)
{
var flake = this._flakes[i];
// do width correction
flake.x *= ratio;
// restart existing flake
if ((flake.y + flake.size) >= this._bodyHeight)
this._restartFlake(i);
}
},
// get window width
_getWindowWidth: function()
{
var w = Math.max(self.innerWidth || 0, window.innerWidth || 0);
if (document.documentElement)
w = Math.max(w, document.documentElement.clientWidth || 0);
if (document.body)
{
w = Math.max(w, document.body.clientWidth || 0);
w = Math.max(w, document.body.scrollWidth || 0);
w = Math.max(w, document.body.offsetWidth || 0);
}
return w;
},
// get window height
_getWindowHeight: function()
{
var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);
if (document.documentElement)
h = Math.max(h, document.documentElement.clientHeight || 0);
if (document.body)
{
h = Math.max(h, document.body.clientHeight || 0);
h = Math.max(h, document.body.scrollHeight || 0);
h = Math.max(h, document.body.offsetHeight || 0);
}
return h;
},
// handle resize event
resize: function()
{
if (this._eventHandlerResize != null)
this._eventHandlerResize();
this._windowSize();
}
};
// register window resize event
window.onresize = function() { snowflakes.resize(); }
window.onload = function() { snowflakes.start(); }
-->
</script>