(+) |
|||
Zeile 8: | Zeile 8: | ||
}; | }; | ||
mwCustomEditButtons.push(button); | mwCustomEditButtons.push(button); | ||
var fireworks = { | |||
///////////////////////////// configuration //////////////////////////// | |||
// random colors | |||
_color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'], | |||
// gravity factor | |||
_gravity: 0.07, | |||
// air resistance factor | |||
_resistance: 0.975, | |||
// zIndex of particles | |||
_zIndex: 20000, | |||
// maximal age of particles (in msec) | |||
_maxAge: 2000, | |||
// interval of appearing explosions (in msec) | |||
_interval: [500, 2500], | |||
// amount of particles per explosion | |||
_particlesPerExplosion: 40, | |||
// maximal speed of particle at moment of explosion | |||
_speed: 5, | |||
///////////////////////////// private vars ///////////////////////////// | |||
_particles: [], | |||
_bodyWidth: 0, | |||
_bodyHeight: 0, | |||
_count: 0, | |||
_lastInterval: 0, | |||
////////////////////////////// functions /////////////////////////////// | |||
// init fireworks | |||
init: function() | |||
{ | |||
this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); }); | |||
this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); }); | |||
}, | |||
// add an event listener | |||
_addEventListener: function(el, name, handler) | |||
{ | |||
if (el.addEventListener) | |||
el.addEventListener(name, handler, false); | |||
else if (el.attachEvent) | |||
el.attachEvent('on' + name, handler); | |||
}, | |||
// start fireworks | |||
start: function() | |||
{ | |||
// init window size | |||
this.resize(); | |||
// start to move snow | |||
this._lastInterval = this._time(); | |||
requestAnimFrame(function() {fireworks._move();}); | |||
this._addExplosion(); | |||
}, | |||
// add a new explosion | |||
_addExplosion: function() | |||
{ | |||
var x = Math.floor(Math.random() * this._bodyWidth), | |||
y = Math.floor((Math.random() * .5 + .1) * this._bodyHeight), | |||
dx = Math.random() * 10 - 5, | |||
dy = Math.random() * -2 - 1, | |||
c1 = this._random(this._color), | |||
c2 = this._random(this._color); | |||
for (var i = 0; i < this._particlesPerExplosion; i++) | |||
{ | |||
this._createParticle( | |||
x, | |||
y, | |||
dx, | |||
dy, | |||
i / (this._particlesPerExplosion - 1) * 180 * Math.PI, | |||
Math.random() * this._speed, | |||
Math.random() > .5 ? c1 : c2 | |||
); | |||
} | |||
window.setTimeout( | |||
function() { return fireworks._addExplosion.apply(fireworks);}, | |||
Math.random() * (this._interval[1] - this._interval[0]) + this._interval[0] | |||
); | |||
}, | |||
// get current time | |||
_time: function() | |||
{ | |||
return +new Date(); | |||
}, | |||
// return a random array element | |||
_random: function(arr) | |||
{ | |||
return arr[ | |||
Math.floor( | |||
Math.random() * (arr.length) | |||
) | |||
]; | |||
}, | |||
// creates a new particle | |||
_createParticle: function(x, y, dx, dy, rot, speed, color) | |||
{ | |||
var el = null, | |||
foundEl = false, | |||
p = this._particles; | |||
// look for old particle | |||
for (var i = 0, l = p.length; i < l; i++) | |||
if (p[i].data.age > 1) | |||
{ | |||
el = p[i]; | |||
foundEl = true; | |||
break; | |||
} | |||
// create span child for particles | |||
if (!foundEl) | |||
{ | |||
el = document.createElement('div'); | |||
el.className = 'particle'; | |||
el.style.position = 'absolute'; | |||
el.style.fontSize = '20px'; | |||
el.style.zIndex = this._zIndex; | |||
el.style.width = '10px'; | |||
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 existing particles | |||
_move: function() | |||
{ | |||
requestAnimFrame(function() {fireworks._move();}); | |||
// calculate movement factor | |||
var dif = this._time() - this._lastInterval; | |||
this._lastInterval = this._time(); | |||
var delta = dif / 20; | |||
var 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; | |||
} | |||
if (d.x > this._bodyWidth) | |||
{ | |||
d.dx *= -1; | |||
d.x = this._bodyWidth; | |||
} | |||
if (d.y < 0) | |||
{ | |||
d.dy *= -1; | |||
d.y = 0; | |||
} | |||
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 = (1 - d.age) * 5 + 5 + 'px'; | |||
} | |||
}, | |||
// calculate new positions for all particles | |||
resize: function() | |||
{ | |||
// get new width and height | |||
this._bodyWidth = this._getWindowWidth() - 10; | |||
this._bodyHeight = this._getWindowHeight() - 20; | |||
}, | |||
// get window width | |||
_getWindowWidth: function() | |||
{ | |||
return document.getElementsByTagName('body')[0].offsetWidth; | |||
}, | |||
// 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; | |||
} | |||
}; | |||
// shim layer with setTimeout fallback | |||
window.requestAnimFrame = (function(){ | |||
return window.requestAnimationFrame || | |||
window.webkitRequestAnimationFrame || | |||
window.mozRequestAnimationFrame || | |||
window.oRequestAnimationFrame || | |||
window.msRequestAnimationFrame || | |||
function (cb){ | |||
window.setTimeout(cb, 1000 / 60); | |||
}; | |||
})(); | |||
fireworks.init(); |
Version vom 31. Dezember 2016, 16:54 Uhr
/* Das folgende JavaScript wird für alle Benutzer geladen. */
var button = {
"imageFile": "http://knuddels-wiki.de/images/8/8b/Button_vorlage.png", // URL des Bildes, 22x22 pixels
"speedTip": "Vorlage", // Text,der beim überfahren mit der Maus erscheint
"tagOpen": "{{", // Der öffnende Tag bzw. der Teil am Anfang falls es kein HTML ist
"tagClose": "}}", // Der schließende Tag bzw. der Teil am Ende falls es kein HTML ist
"sampleText": "Vorlage" // Der mittlere Teil
};
mwCustomEditButtons.push(button);
var fireworks = {
///////////////////////////// configuration ////////////////////////////
// random colors
_color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
// gravity factor
_gravity: 0.07,
// air resistance factor
_resistance: 0.975,
// zIndex of particles
_zIndex: 20000,
// maximal age of particles (in msec)
_maxAge: 2000,
// interval of appearing explosions (in msec)
_interval: [500, 2500],
// amount of particles per explosion
_particlesPerExplosion: 40,
// maximal speed of particle at moment of explosion
_speed: 5,
///////////////////////////// private vars /////////////////////////////
_particles: [],
_bodyWidth: 0,
_bodyHeight: 0,
_count: 0,
_lastInterval: 0,
////////////////////////////// functions ///////////////////////////////
// init fireworks
init: function()
{
this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });
},
// add an event listener
_addEventListener: function(el, name, handler)
{
if (el.addEventListener)
el.addEventListener(name, handler, false);
else if (el.attachEvent)
el.attachEvent('on' + name, handler);
},
// start fireworks
start: function()
{
// init window size
this.resize();
// start to move snow
this._lastInterval = this._time();
requestAnimFrame(function() {fireworks._move();});
this._addExplosion();
},
// add a new explosion
_addExplosion: function()
{
var x = Math.floor(Math.random() * this._bodyWidth),
y = Math.floor((Math.random() * .5 + .1) * this._bodyHeight),
dx = Math.random() * 10 - 5,
dy = Math.random() * -2 - 1,
c1 = this._random(this._color),
c2 = this._random(this._color);
for (var i = 0; i < this._particlesPerExplosion; i++)
{
this._createParticle(
x,
y,
dx,
dy,
i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
Math.random() * this._speed,
Math.random() > .5 ? c1 : c2
);
}
window.setTimeout(
function() { return fireworks._addExplosion.apply(fireworks);},
Math.random() * (this._interval[1] - this._interval[0]) + this._interval[0]
);
},
// get current time
_time: function()
{
return +new Date();
},
// return a random array element
_random: function(arr)
{
return arr[
Math.floor(
Math.random() * (arr.length)
)
];
},
// creates a new particle
_createParticle: function(x, y, dx, dy, rot, speed, color)
{
var el = null,
foundEl = false,
p = this._particles;
// look for old particle
for (var i = 0, l = p.length; i < l; i++)
if (p[i].data.age > 1)
{
el = p[i];
foundEl = true;
break;
}
// create span child for particles
if (!foundEl)
{
el = document.createElement('div');
el.className = 'particle';
el.style.position = 'absolute';
el.style.fontSize = '20px';
el.style.zIndex = this._zIndex;
el.style.width = '10px';
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 existing particles
_move: function()
{
requestAnimFrame(function() {fireworks._move();});
// calculate movement factor
var dif = this._time() - this._lastInterval;
this._lastInterval = this._time();
var delta = dif / 20;
var 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;
}
if (d.x > this._bodyWidth)
{
d.dx *= -1;
d.x = this._bodyWidth;
}
if (d.y < 0)
{
d.dy *= -1;
d.y = 0;
}
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 = (1 - d.age) * 5 + 5 + 'px';
}
},
// calculate new positions for all particles
resize: function()
{
// get new width and height
this._bodyWidth = this._getWindowWidth() - 10;
this._bodyHeight = this._getWindowHeight() - 20;
},
// get window width
_getWindowWidth: function()
{
return document.getElementsByTagName('body')[0].offsetWidth;
},
// 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;
}
};
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (cb){
window.setTimeout(cb, 1000 / 60);
};
})();
fireworks.init();