Silvesterfeuerwerk - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

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.

Download Button
Downloads:
Foto Garten
Foto Landschaft
Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj175_0/fireworks.js"></script>
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       = '&#x25cf;';
}
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.

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


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 67 Heute
            » 115 Gestern
            » 390 Woche
            » 2598 Monat
            » 49559 Jahr
            » 273765 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt