Silvesterfeuerwerk

Scripte > Attachment

Ein Feuerwerk für die Homepage

Ein Script, dass zu Silvester, auf Glückwunschseiten oder anderweitigen Feierlichkeiten eingesetzt werden kann.
Einfach nur die ZIP-Datei entpacken und das Verzeichnis "wsX5Obj" auf den Webserver ins Root-Verzeichnis kopieren.
Das Feuerwerk lässt sich in vielen Funktionen (Größe, Form, Farben etc.) in der Javascript-Datei "firework.js" den eigenen Bedürfnissen anpassen. Die einzelnen Möglichkeiten für die Konfiguration sind dort notiert.

Der Scriptaufruf sollte gleich nach dem <HEAD> Tag eingefügt werden, kann aber ebenso an oberster Stelle nach dem <HTML> oder oder auch im BODY-Bereich <body>...</body> der aufrufende Datei eingefügt werden.

Eine demo.html ist jbeigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Downloads:

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code Datei "fireworks.js"

var fireworks = {

// ### Anfang Konfiguration ###

// Zufällige Farben
_color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
// Schwerkraft Faktor
_gravity: 0.07,
// Luftwiderstand Faktor
_resistance: 0.975,
// zIndex der Partikel
_zIndex: 50000,
// Maximales Alter der Partikel (in msec)
_maxAge: 1000,
// Intervall der auftretenden Explosionen (in msec)
_interval: [100, 800],
// Anzahl der Partikel pro Explosion
_particlesPerExplosion: 200,
// Maximale Geschwindigkeit der Partikel im Moment der Explosion
_speed: 10,
// Minimale/Maximale Größe der Partikel
_minSize: 8,
_maxSize: 14,

// ### Ende Konfiguration ###

_particles: [],
_bodyWidth: 0,
_bodyHeight: 0,
_count: 0,
_lastInterval: 0,
init: function() {

this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });

},
_addEventListener: function(el, name, handler) {

if (el.addEventListener)
el.addEventListener(name, handler, false);
else if (el.attachEvent)
el.attachEvent('on' + name, handler);

},
start: function() {

this.resize();
this._animFn = function() {fireworks._move();};
this._lastInterval = this._time();
requestAnimFrame(this._animFn);
this._addExplosion();

},
_time: function() {

return +new Date();

},
_random: function(value) {

return Math.random() * value;

},
_randomArray: function(arr) {

return arr[

Math.floor(
Math.random() * (arr.length)
)

];

},
_addExplosion: function() {

var x = Math.floor(this._random(this._bodyWidth)),
y = Math.floor((this._random(.5) + .1) * this._bodyHeight),
dx = this._random(10) - 5,
dy = this._random(-2) - 1,
c1 = this._randomArray(this._color),
c2 = this._randomArray(this._color);
for (var i = 0; i < this._particlesPerExplosion; i++) {
this._createParticle(
x,
y,
dx,
dy,
i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
this._random(this._speed),
this._random(1) > .5 ? c1 : c2
);
}
window.setTimeout(
function() {
return fireworks._addExplosion.apply(fireworks);
},
this._random(this._interval[1] - this._interval[0]) + this._interval[0]
);
},

_createParticle: function(x, y, dx, dy, rot, speed, color) {

var el = null,
foundEl = false,
p = this._particles;
for (var i = 0, l = p.length; i < l; i++)
if (p[i].data.age > 1) {

el = p[i];
foundEl = true;
break;
}

if (!foundEl) {
el = document.createElement('div');
el.className       = 'particle';
el.style.position = 'absolute';
el.style.fontSize = this._maxSize + 'px';
el.style.zIndex    = this._zIndex;
el.style.width     = this._maxSize + 'px';
el.style.textAlign = 'center';
el.style.overflow = 'hidden';
el.innerHTML       = '●';
}
el.style.left = x + 'px';
el.style.top   = y + 'px';
el.style.color = color;
el.data = {
x: x,
y: y,
dx: Math.cos(rot) * speed + dx,
dy: Math.sin(rot) * speed + dy,
color: color,
age: Math.random() * .25
};
if (!foundEl) {
document.getElementsByTagName('body')[0].appendChild(el);
this._particles.push(el);
}

},
_move: function() {
requestAnimFrame(this._animFn);
var dif = this._time() - this._lastInterval;
this._lastInterval = this._time();
var delta = dif / 20,
el,
d,
p = this._particles,
r = Math.pow(this._resistance, delta),
g = this._gravity * delta,
a = dif / this._maxAge;
for (var i = 0, l = p.length; i < l; i++) {

el = p[i];
d = el.data;
if (d.age > 1)
continue;
d.age += a;
d.dy += g;
d.dx *= r;
d.dy *= r;
d.x += d.dx * delta;
d.y += d.dy * delta;
if (d.x < 0) {
d.dx *= -1;
d.x = 0;
} else if (d.x > this._bodyWidth) {
d.dx *= -1;
d.x = this._bodyWidth;
}
if (d.y < 0) {
d.dy *= -1;
d.y = 0;
} else if (d.y > this._bodyHeight) {
d.dy *= -1;
d.y = this._bodyHeight;
}
if (d.age > 1)
d.x = d.y = 0;
el.style.left = d.x + 'px';
el.style.top = d.y + 'px';
el.style.color = (Math.random() * .5 + d.age >= 1) ? 'transparent' : d.color;
el.style.fontSize = Math.max(this._minSize, (1 - d.age) * this._maxSize) + 'px';
}

},
resize: function() {

this._bodyWidth = this._getWindowWidth() - this._maxSize;

this._bodyHeight = this._getWindowHeight() - this._maxSize - 10;

},
_getWindowWidth: function() {

return document.getElementsByTagName('body')[0].offsetWidth;

},
_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;

}

};

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function (cb){

window.setTimeout(cb, 1000 / 60);

};

})();

fireworks.init();

Feedbacks zu ""

{PC_LOAD}

Vielen Dank für Dein Feedback.