Forum - Zu Silvester: Feuerwerk-Effekte für die Homepage mit Sound

<style>
canvas {height:auto;
  position:absolute; 
  left:0; 
  top:0; 
  bottom:0; 
  right:0;
  z-index:99999;
}
 
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
 
.gruesse {
  display:inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  margin:20px auto;
  color:#eeeeee;
  text-align:center;
  background:#45300E;
  padding:20px;
  border-radius:10px;
  border: 5px double #916D41;
  width:auto;
}
 
.text2 {
  font-size:14px;margin-top:10px;
}
 
.link{
  font-size:12px;color:#916D41 !important;
}
.link:hover{
  color:#eeeeee !important;
}
 
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:-40px;
  transition: all 1s;
}
 
.start_feuerwerk:hover {
  width:110px;
  left:0; padding-left:5px;
}
 
#sound_off{  display: flex;  
  align-items:center;
  justify-content:ccenter;
  z-index:999998;
  text-align:left;
  cursor:pointer;
  width:150px;
  border-radius:5px;
  font-size:12px;
  padding:5px 10px;
  color:#eeeeee;
  background:#6E522E;
  border: 2px solid #3B200B;
}
 
#sound_off div {
display:inline-block;
margin-left:20px;
}
</style>
 

<a title="Bitte anklicken!" href="#" onclick="feuerwerk();"><img class="start_feuerwerk" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 

<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b624252/f22t627p3679n22_vNqBaUWl.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 
<script>
function feuerwerk() {
 
/* Sound ein/aus */
$('#audioplay_feuer').before(`
<center>
 
<div class="gruesse_div">
<div class="gruesse">
 
Happy New Year
 
<div class="text2">
 
Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neues Jahr 2023
 
</div>
 
<a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
</div>
 
<div title="Start/Stopp Sound" id="sound_off"><img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
 $('body').css('overflow','hidden');
 
  var playing = true;
  document.getElementById('audioplay_feuer').play();  
  $('#sound_off').on('click',function() {
    if (playing == true) {
      document.getElementById('audioplay_feuer').pause();
      playing = false;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="width:30px;border-radius:3px;"><div>Start Sound</div>'); 
    } else {
      document.getElementById('audioplay_feuer').play(); 
      playing = true;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 

/* JavaScript laden */
var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },
 
    // create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    rockets = [],
    MAX_PARTICLES = 400,
    colorCode = 0;
 
// init
$(document).ready(function() {
    document.body.appendChild(canvas);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(launch, 800);
    setInterval(loop, 1000 / 50);
});
 
// update mouse position
$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});
 
// launch more rockets!!!
$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
    }
});
 
function launch() {
    launchFrom(mousePos.x);
}
 
function launchFrom(x) {
    if (rockets.length < 10) {
        var rocket = new Rocket(x);
        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        rocket.vel.y = Math.random() * -3 - 4;
        rocket.vel.x = Math.random() * 6 - 3;
        rocket.size = 8;
        rocket.shrink = 0.999;
        rocket.gravity = 0.01;
        rockets.push(rocket);
    }
}
 
function loop() {
    // update screen size
    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }
 
    // clear canvas
    context.fillStyle = "rgba(0, 0, 0, 0.01)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
    var existingRockets = [];
 
    for (var i = 0; i < rockets.length; i++) {
        // update and render
        rockets[i].update();
        rockets[i].render(context);
 
        // calculate distance with Pythagoras
        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
 
        // random chance of 1% if rockets is above the middle
        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
 
/* Explosion rules
             - 80% of screen
            - going down
            - close to the mouse
            - 1% chance of random explosion
        */
        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
            rockets[i].explode();
        } else {
            existingRockets.push(rockets[i]);
        }
    }
 
    rockets = existingRockets;
 
    var existingParticles = [];
 
    for (var i = 0; i < particles.length; i++) {
        particles[i].update();
 
        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }
 
    // update array with existing particles - old particles should be garbage collected
    particles = existingParticles;
 
    while (particles.length > MAX_PARTICLES) {
        particles.shift();
    }
}
 
function Particle(pos) {
    this.pos = {
        x: pos ? pos.x : 0,
        y: pos ? pos.y : 0
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;
 
    this.resistance = 1;
    this.gravity = 0;
 
    this.flick = false;
 
    this.alpha = 1;
    this.fade = 0;
    this.color = 0;
}
 
Particle.prototype.update = function() {
    // apply resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;
 
    // gravity down
    this.vel.y += this.gravity;
 
    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
 
    // shrink
    this.size *= this.shrink;
 
    // fade out
    this.alpha -= this.fade;
};
 
Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }
 
    c.save();
 
    c.globalCompositeOperation = 'lighter';
 
    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;
 
    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
 
    c.fillStyle = gradient;
 
    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();
 
    c.restore();
};
 
Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};
 
function Rocket(x) {
    Particle.apply(this, [{
        x: x,
        y: SCREEN_HEIGHT}]);
 
    this.explosionColor = 0;
}
 
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
 
Rocket.prototype.explode = function() {
    var count = Math.random() * 10 + 80;
 
    for (var i = 0; i < count; i++) {
        var particle = new Particle(this.pos);
        var angle = Math.random() * Math.PI * 2;
 
        // emulate 3D effect by using cosine and put more particles in the middle
        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
 
        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;
 
        particle.size = 10;
 
        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = Math.random() * 0.05 + 0.93;
 
        particle.flick = true;
        particle.color = this.explosionColor;
 
        particles.push(particle);
    }
};
 
Rocket.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }
 
    c.save();
 
    c.globalCompositeOperation = 'lighter';
 
    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;
 
    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
    gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
 
    c.fillStyle = gradient;
 
    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();
 
    c.restore();
};
};
 
//feuerwerk();
</script>
 

[Feuerwerk]
 

<a title="Bitte anklicken!" href="#" onclick="feuerwerk();"><img width="80px" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 

//files.homepagemodules.de/b2001010/a_276.png
 

Reihenfolge: 0
 

<script>
////////////////////////////////////////////////////////////////////////
// Fireworks-Script (c) 2012, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////
 
var fireworks = {
 
 ///////////////////////////// configuration ////////////////////////////
 
 // Zufällige Farben
 _color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
 // Verweilfaktor
 _gravity: 0.07,
 // Geschwinigkeitsfaktor in der Luft 
 _resistance: 0.975,
 // z-index der Partikel (meist hoch genug!)
 _zIndex: 20000,
 // Maximal Standzeit der Partikel (in msec)
 _maxAge: 2000,
 // Intervalzeit der Explosionen (in msec)
 _interval: [500, 2500],
 // Anzahl der Partikel pro  Explosion
 _particlesPerExplosion: 40,
 // Maximal Geschwindigkeit der Partikel während der 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      = '&#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 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();
 </script>
 

<style>
canvas {
  background: rgba(0, 0, 0, 0.9);
  display: none;
  height:auto;
  position:absolute; 
  left:0; top:0; bottom:0; right:0;
  z-index:99999;
  cursor: crosshair; 
}
 
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
 
.gruesse {
  display:inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  margin:20px auto;
  color:#eeeeee;
  text-align:center;
  background:#45300E;
  padding:20px;
  border-radius:10px;
  border: 5px double #916D41;
  width:auto;
}
 
.text2 {
  font-size:14px;margin-top:10px;
}
 
.link{
  font-size:12px;color:#916D41 !important;
}
.link:hover{
  color:#eeeeee !important;
}
 
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:-40px;
  transition: all 1s;
}
 
.start_feuerwerk:hover {
  width:110px;
  left:0; padding-left:5px;
}
 
#sound_off{  display: flex;  
  align-items:center;
  justify-content:ccenter;
  z-index:999998;
  text-align:left;
  cursor:pointer;
  width:150px;
  border-radius:5px;
  font-size:12px;
  padding:5px 10px;
  color:#eeeeee;
  background:#6E522E;
  border: 2px solid #3B200B;
}
 
#sound_off div {
  display:inline-block;
  margin-left:20px;
}
</style>
 
<a href="#" onclick="feuerwerk();"><img class="start_feuerwerk" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
 
<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b624252/f22t627p3679n22_vNqBaUWl.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 
<script>
function feuerwerk() {
 

$('#audioplay_feuer').before(`
 
<center>
 
<div class="gruesse_div">
<div class="gruesse">
 
Happy New Year
 
<div class="text2">
 
Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neues Jahr 2023
 
</div>
 
<a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
</div>
 
<!-- Sound ein/aus -->
<div title="Start/Stopp Sound" id="sound_off"><img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
$('body').css('overflow','hidden');
$('canvas').show();
 
  var playing = true;
  document.getElementById('audioplay_feuer').play();  
  $('#sound_off').on('click',function() {
    if (playing == true) {
      document.getElementById('audioplay_feuer').pause();
      playing = false;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="width:30px;border-radius:3px;"><div>Start Sound</div>'); 
    } else {
      document.getElementById('audioplay_feuer').play(); 
      playing = true;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 
};
 

 
/* Das Canvas-Dkript */
window.requestAnimFrame = ( function() {
	return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				function( callback ) {
					window.setTimeout( callback, 1000 / 60 );
				};
})();
 
 
/* now we will setup our basic variables for the demo */
var canvas = document.getElementById( 'canvas' ),
		ctx = canvas.getContext( '2d' ),
		cw = window.innerWidth,
		ch = window.innerHeight,
		fireworks = [],
		particles = [],
		/* starting hue */
		hue = 120,
		/* when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks */
		limiterTotal = 5,
		limiterTick = 0,
		/* this will time the auto launches of fireworks, one launch per 80 loop ticks */
		timerTotal = 80,
		timerTick = 0,
		mousedown = false,
		mx,
		my;
 
//function feuerwerk() {		
canvas.width = cw;
canvas.height = ch;
 
//};
 
function random( min, max ) {
	return Math.random() * ( max - min ) + min;
}
 
function calculateDistance( p1x, p1y, p2x, p2y ) {
	var xDistance = p1x - p2x,
			yDistance = p1y - p2y;
	return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
 
function Firework( sx, sy, tx, ty ) {
	this.x = sx;
	this.y = sy;
 
	this.sx = sx;
	this.sy = sy;
 
	this.tx = tx;
	this.ty = ty;
 
	this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
	this.distanceTraveled = 0;
	
	this.coordinates = [];
	this.coordinateCount = 3;
 
	while( this.coordinateCount-- ) {
		this.coordinates.push( [ this.x, this.y ] );
	}
	this.angle = Math.atan2( ty - sy, tx - sx );
	this.speed = 2;
	this.acceleration = 1.05;
	this.brightness = random( 50, 70 );
	this.targetRadius = 1;
}
 
Firework.prototype.update = function( index ) {
	this.coordinates.pop();
	this.coordinates.unshift( [ this.x, this.y ] );
	
	if( this.targetRadius < 8 ) {
		this.targetRadius += 0.3;
	} else {
		this.targetRadius = 1;
	}
	
	this.speed *= this.acceleration;
	
	var vx = Math.cos( this.angle ) * this.speed,
			vy = Math.sin( this.angle ) * this.speed;
	this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
	
	if( this.distanceTraveled >= this.distanceToTarget ) {
		createParticles( this.tx, this.ty );
		fireworks.splice( index, 1 );
	} else {
		this.x += vx;
		this.y += vy;
	}
}
 
Firework.prototype.draw = function() {
	ctx.beginPath();
	ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
	ctx.lineTo( this.x, this.y );
	ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
	ctx.stroke();
	
	ctx.beginPath();
	ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
	ctx.stroke();
}
 
function Particle( x, y ) {
	this.x = x;
	this.y = y;
	this.coordinates = [];
	this.coordinateCount = 5;
	while( this.coordinateCount-- ) {
		this.coordinates.push( [ this.x, this.y ] );
	}
	this.angle = random( 0, Math.PI * 2 );
	this.speed = random( 1, 10 );
	this.friction = 0.95;
	this.gravity = 1;
	this.hue = random( hue - 20, hue + 20 );
	this.brightness = random( 50, 80 );
	this.alpha = 1;
	this.decay = random( 0.015, 0.03 );
}
 
Particle.prototype.update = function( index ) {
	this.coordinates.pop();
	this.coordinates.unshift( [ this.x, this.y ] );
	this.speed *= this.friction;
	this.x += Math.cos( this.angle ) * this.speed;
	this.y += Math.sin( this.angle ) * this.speed + this.gravity;
	this.alpha -= this.decay;
	
	if( this.alpha <= this.decay ) {
		particles.splice( index, 1 );
	}
}
 
Particle.prototype.draw = function() {
	ctx. beginPath();
	ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
	ctx.lineTo( this.x, this.y );
	ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
	ctx.stroke();
}
 
function createParticles( x, y ) {
	var particleCount = 30;
	while( particleCount-- ) {
		particles.push( new Particle( x, y ) );
	}
}
 
function loop() {
	requestAnimFrame( loop );
	
	hue += 0.5;
	
	ctx.globalCompositeOperation = 'destination-out';
	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
	ctx.fillRect( 0, 0, cw, ch );
	ctx.globalCompositeOperation = 'lighter';
	
	var i = fireworks.length;
	while( i-- ) {
		fireworks[ i ].draw();
		fireworks[ i ].update( i );
	}
	
	var i = particles.length;
	while( i-- ) {
		particles[ i ].draw();
		particles[ i ].update( i );
	}
	
	if( timerTick >= timerTotal ) {
		if( !mousedown ) {
			fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
			timerTick = 0;
		}
	} else {
		timerTick++;
	}
	
	if( limiterTick >= limiterTotal ) {
		if( mousedown ) {
			fireworks.push( new Firework( cw / 2, ch, mx, my ) );
			limiterTick = 0;
		}
	} else {
		limiterTick++;
	}
}
 
canvas.addEventListener( 'mousemove', function( e ) {
	mx = e.pageX - canvas.offsetLeft - 20;
	my = e.pageY - canvas.offsetTop - 47;
});
 
canvas.addEventListener( 'mousedown', function( e ) {
	e.preventDefault();
	mousedown = true;
});
 
canvas.addEventListener( 'mouseup', function( e ) {
	e.preventDefault();
	mousedown = false;
});
 
window.onload = loop;
 
</script>
 

[Feuerwerk]
 

<a title="Bitte anklicken!" href="#" onclick="feuerwerk();"><img width="80px" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 

//files.homepagemodules.de/b2001010/a_276.png
 

Reihenfolge: 0
 

<style>
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
.gruesse {
  display:inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  margin:20px auto;
  color:#eeeeee;
  text-align:center;
  background:#45300E;
  padding:20px;
  border-radius:10px;
  border: 5px double #916D41;
  width:auto;
}
.text2 {
  font-size:14px;margin-top:10px;
}
.link{
  font-size:12px;color:#916D41 !important;
}
.link:hover{
  color:#eeeeee !important;
}
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:-40px;
  transition: all 1s;
}
.start_feuerwerk:hover {
  width:110px;
  left:0; padding-left:5px;
  z-index:999999;
}
#sound_off{  display: flex;  
  align-items:center;
  justify-content:ccenter;
  z-index:999998;
  text-align:left;
  cursor:pointer;
  width:150px;
  border-radius:5px;
  font-size:12px;
  padding:5px 10px;
  color:#eeeeee;
  background:#6E522E;
  border: 2px solid #3B200B;
}
#sound_off div {
  display:inline-block;
  margin-left:20px;
}
</style>
 
<!-- Auslöse-Button ist bereits im Feuerwerk-Skript vorhanden! --> 
<!-- <a href="#" onclick="feuerwerk();"><img class="start_feuerwerk" src="//files.homepagemodules.de/b104774/f46t1197p2706n145_khbVxERS.png"></a> -->
 
 
<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b624252/f22t627p3679n22_vNqBaUWl.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 

<!-- Wenn nicht vorhanden folgende Zeile freigeben! -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> --> 
<script>
function feuerwerk() {
 
/* Sound ein/aus */
$('#audioplay_feuer').before(`
<center>
 
<div class="gruesse_div">
<div class="gruesse">
 
Happy New Year
 
<div class="text2">
 
Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neues Jahr 2023
 
</div>
 
<a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
</div>
 
<div title="Start/Stopp Sound" id="sound_off"><img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
$('body').css('background','rgba(0, 0, 0, 0.9)');
$('#cboxOverlay, .particle').css('display','block');
 
  var playing = true;
  document.getElementById('audioplay_feuer').play();  
  $('#sound_off').on('click',function() {
    if (playing == true) {
      document.getElementById('audioplay_feuer').pause();
      playing = false;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="width:30px;border-radius:3px;"><div>Start Sound</div>'); 
    } else {
      document.getElementById('audioplay_feuer').play(); 
      playing = true;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 
};
</script>
 

<style>
.particle {
display:none;
}
 
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
 
.gruesse {
  display:inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  margin:20px auto;
  color:#eeeeee;
  text-align:center;
  background:#45300E;
  padding:20px;
  border-radius:10px;
  border: 5px double #916D41;
  width:auto;
}
 
.text2 {
  font-size:14px;margin-top:10px;
}
 
 
.link{
  font-size:12px;color:#916D41 !important;
}
.link:hover{
  color:#eeeeee !important;
}
 
 
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:-40px;
  transition: all 1s;
}
 
.start_feuerwerk:hover {
  width:110px;
  left:0; padding-left:5px;
  z-index:999999;
}
 
 
#sound_off{  display: flex;  
  align-items:center;
  justify-content:ccenter;
  z-index:999998;
  text-align:left;
  cursor:pointer;
  width:150px;
  border-radius:5px;
  font-size:12px;
  padding:5px 10px;
  color:#eeeeee;
  background:#6E522E;
  border: 2px solid #3B200B;
}
 
#sound_off div {
  display:inline-block;
  margin-left:20px;
}
</style>
 

 
<a href="#" onclick="feuerwerk();"><img class="start_feuerwerk" src="//files.homepagemodules.de/b104774/f46t1197p2706n145_khbVxERS.png"></a>
 
 
<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b624252/f22t627p3679n22_vNqBaUWl.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 
<script>
function feuerwerk() {
 
/* Sound ein/aus */
$('#audioplay_feuer').before(`
<center>
 
<div class="gruesse_div">
<div class="gruesse">
 
Happy New Year
 
<div class="text2">
 
Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neues Jahr 2023
 
</div>
 
<a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
</div>
 
<div title="Start/Stopp Sound" id="sound_off"><img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
$('body').css('background','rgba(0, 0, 0, 0.9)');
$('#cboxOverlay, .particle').css('display','block');
 
  var playing = true;
  document.getElementById('audioplay_feuer').play();  
  $('#sound_off').on('click',function() {
    if (playing == true) {
      document.getElementById('audioplay_feuer').pause();
      playing = false;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="width:30px;border-radius:3px;"><div>Start Sound</div>'); 
    } else {
      document.getElementById('audioplay_feuer').play(); 
      playing = true;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 
}
 
////////////////////////////////////////////////////////////////////////
// Fireworks-Script (c) 2012, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////
 
var fireworks = {
 
 ///////////////////////////// configuration ////////////////////////////
 

 // Zufällige Farben
 _color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
 // Verweilfaktor
 _gravity: 0.07,
 // Geschwinigkeitsfaktor in der Luft 
 _resistance: 0.975,
 // z-index der Partikel (meist hoch genug!)
 _zIndex: 20000,
 // Maximal Standzeit der Partikel (in msec)
 _maxAge: 2000,
 // Intervalzeit der Explosionen (in msec)
 _interval: [500, 2500],
 // Anzahl der Partikel pro  Explosion
 _particlesPerExplosion: 40,
 // Maximal Geschwindigkeit der Partikel während der 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      = '&#9679;';
  }
 
  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();
</script>
 

[Feuerwerk]
 

<a title="Bitte anklicken!" href="#" onclick="feuerwerk();"><img width="80px" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 

//files.homepagemodules.de/b2001010/a_276.png
 

Reihenfolge: 0
 

<style>
.fireworks-container {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
 
  height:auto;
  left:0; top:0; bottom:0; right:0;
  z-index:99999;
}
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
 
.gruesse {
  display:inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  margin:20px auto;
  color:#eeeeee;
  text-align:center;
  background:#45300E;
  padding:20px;
  border-radius:10px;
  border: 5px double #916D41;
  width:auto;
}
 
.text2 {
  font-size:14px;margin-top:10px;
}
 
.link{
  font-size:12px;color:#916D41 !important;
}
.link:hover{
  color:#eeeeee !important;
}
 
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:-40px;
  transition: all 1s;
}
 
.start_feuerwerk:hover {
  width:110px;
  left:0; padding-left:5px;
}
 
#sound_off{  display: flex;  
  align-items:center;
  justify-content:ccenter;
  z-index:999998;
  text-align:left;
  cursor:pointer;
  width:150px;
  border-radius:5px;
  font-size:12px;
  padding:5px 10px;
  color:#eeeeee;
  background:#6E522E;
  border: 2px solid #3B200B;
}
 
#sound_off div {
  display:inline-block;
  margin-left:20px;
}
</style>
 
 
<div class="fireworks-container" style="display:none;"></div>
<a href="#" onclick="feuerwerk();"><img class="start_feuerwerk" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 
 
<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b624252/f22t627p3679n22_vNqBaUWl.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 

<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
<script>
function feuerwerk() {
 
$('body').css('overflow','hidden');
$('.fireworks-container').css('display','block').show();
 
$('#audioplay_feuer').before(`
 
<center>
 
<div class="gruesse_div">
<div class="gruesse">
 
Happy New Year
 
<div class="text2">
 
Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neues Jahr 2023
 
</div>
 
<a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
</div>
 
<!-- Sound ein/aus -->
<div title="Start/Stopp Sound" id="sound_off"><img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
  var playing = true;
  document.getElementById('audioplay_feuer').play();  
  $('#sound_off').on('click',function() {
    if (playing == true) {
      document.getElementById('audioplay_feuer').pause();
      playing = false;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="width:30px;border-radius:3px;"><div>Start Sound</div>'); 
    } else {
      document.getElementById('audioplay_feuer').play(); 
      playing = true;
      $(this).html('<img src="//files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 
initFireWorks();
initCountDown();
};
</script>
 
<script>
function initFireWorks() {
  const containers = document.querySelectorAll('.fireworks-container');
  containers.forEach((container, index) => {
    index += 1;
    const fireworks = new Fireworks(container, {
      hue: { min: 0, max: 360 },
      delay: { min: 200 / index, max: 300 / index },
      brightness: { min: 80, max: 100 },
      rocketsPoint: 50,
      opacity: 1,
      speed: 1 / index,
      acceleration: 1.05,
      friction: 0.97,
      gravity: 2,
      particles: 200 / index,
      trace: 4 / index,
      explosion: 40 / index });
 
    fireworks.start();
  });
};
</script>
 
 

[Feuerwerk]
 

<a title="Bitte anklicken!" href="#" onclick="feuerwerk();"><img width="80px" src="//files.homepagemodules.de/b104774/a_499_8eb4375b.png"></a>
 

//files.homepagemodules.de/b2001010/a_276.png
 

Reihenfolge: 0