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.
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.


Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj175_0/fireworks.js"></script>
Code Datei "fireworks.js"
var fireworks = {
// ### Anfang Konfiguration ###// ### Ende 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,
_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 ""
Keine Kommentare gefunden.
Vielen Dank für Dein Feedback.
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Login | Registrierung