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.
x runter geladen
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 ""
Es gibt noch keine Rezension.
Vielen Dank für Dein Feedback.