Forum - Update: Zu Silvester: Feuerwerk 6 mit Sound und Auslöse-Button - 2

<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_div .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;
}
 
.gruesse_div .text2 {
  font-size:14px;margin-top:10px;
}
 
.gruesse_div .link{
  font-size:12px;color:#916D41 !important;
}
.gruesse_div .link:hover{
  color:#eeeeee !important;
}
 
.start_feuerwerk {
  position:fixed;
  width:70px;
  top:250px;
  left:10px;
  transition: all 1s;
  z-index:9999;
}
.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>
<!-- <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/mp3">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 
<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 2025
 
      </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>');
    }; 
  });
 
 
let chars, particles, canvas, ctx, w, h, current;
let duration = 15000;
let str = ['Frohes', 'Neues', 'Jahr', '2025'];
init();
resize();
requestAnimationFrame(render);
addEventListener('resize', resize);
function makeChar(c) {
  let tmp = document.createElement('canvas');
 // let size = tmp.width = tmp.height = w < 400 ? 200 : 300;
    let size = tmp.width = tmp.height = w < 800 ? 400 : 600;
  let tmpCtx = tmp.getContext('2d');
  tmpCtx.font = 'bold ' + size + 'px Arial';
  tmpCtx.fillStyle = 'white';
  tmpCtx.textBaseline = "middle";
  tmpCtx.textAlign = "center";
  tmpCtx.fillText(c, size / 2, size / 2);
  let char2 = tmpCtx.getImageData(0, 0, size, size);
  let char2particles = [];
  for (var i = 0; char2particles.length < particles; i++) {
    let x = size * Math.random();
    let y = size * Math.random();
    let offset = parseInt(y) * size * 4 + parseInt(x) * 4;
    if (char2.data[offset])
    char2particles.push([x - size / 2, y - size / 2]);
  }
  return char2particles;
}
function init() {
  canvas = document.createElement('canvas');
  document.body.append(canvas);
  document.body.style.margin = 0;
  document.body.style.overflow = 'hidden';
  document.body.style.background = 'black';
  ctx = canvas.getContext('2d');
}
function resize() {
  w = canvas.width = innerWidth;
  h = canvas.height = innerHeight;
  //particles = innerWidth < 400 ? 55 : 99;
    particles = innerWidth < 800 ? 110 : 198;
}
function makeChars(t) {
  let actual = parseInt(t / duration) % str.length;
  if (current === actual)
  return;
  current = actual;
  chars = [...str[actual]].map(makeChar);
}
function render(t) {
  makeChars(t);
  requestAnimationFrame(render);
  ctx.fillStyle = '#00000010';
  ctx.fillRect(0, 0, w, h);
  chars.forEach((pts, i) => firework(t, i, pts));
}
function firework(t, i, pts) {
  t -= i * 200;
  let id = i + chars.length * parseInt(t - t % duration);
  t = t % duration / duration;
  let dx = (i + 1) * w / (1 + chars.length);
  dx += Math.min(0.33, t) * 100 * Math.sin(id);
  let dy = h * 0.5;
  dy += Math.sin(id * 4547.411) * h * 0.1;
  if (t < 0.33) {
    rocket(dx, dy, id, t * 3);
  } else {
    explosion(pts, dx, dy, id, Math.min(1, Math.max(0, t - 0.33) * 2));
  }
}
function rocket(x, y, id, t) {
  ctx.fillStyle = 'white';
  let r = 2 - 2 * t + Math.pow(t, 15 * t) * 16;
  y = h - y * t;
  circle(x, y, r);
}
function explosion(pts, x, y, id, t) {
  let dy = t * t * t * 20;
  let r = Math.sin(id) * 1 + 3;
  r = t < 0.5 ? (t + 0.5) * t * r : r - t * r;
  ctx.fillStyle = `hsl(${id * 55}, 55%, 55%)`;
  pts.forEach((xy, i) => {
    if (i % 20 === 0)
    ctx.fillStyle = `hsl(${id * 55}, 55%, ${55 + t * Math.sin(t * 55 + i) * 45}%)`;
    circle(t * xy[0] + x, h - y + t * xy[1] + dy, r);
  });
}
function circle(x, y, r) {
  ctx.beginPath();
  ctx.ellipse(x, y, r, r, 0, 0, 6.283);
  ctx.fill();
}
};
</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>
:root {
  --HintergrundFeuerwerk: url(https://files.homepagemodules.de/b104774/f46t1197p2706n141_VvZsLqac.jpg) top center no-repeat;
  --Ausloesung: url(https://files.homepagemodules.de/b104774/f46t1197p2706n145_khbVxERS.png) top center no-repeat;
}
 
#feuerwerkOverlay {z-index:999999;
  display: none;
  position: fixed; 
  top:0; 
  background-color: #876946;
  background: var(--HintergrundFeuerwerk);
  background-size: cover;
  opacity:1.0;
  height:100%;
  width:100%;
}
.gruesse_div { 
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:999999;
}
.gruesse_div .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;
}
.gruesse_div .text2 {
  font-size:14px;margin-top:10px;
}
.gruesse_div .link{
  font-size:12px;color:#916D41 !important;
}
.gruesse_div .link:hover{
  color:#eeeeee !important;
}
.start_feuerwerk {
  background: var(--Ausloesung);
  background-size: contain;
  position:fixed;
  width:100px;
  height:100px;
  top:250px;
  left: 10px;
  transition: all 1s;
  z-index:99;
}
.start_feuerwerk:hover {
  height:150px; 
  width:150px; 
  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 id="feuerwerkOverlay"></div>
<a href="#" onclick="feuerwerk();"><div class="start_feuerwerk"></div></a>
 
 
<!-- Silvester-Sound -->
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b104774/f46t1743p4728n2_rGWegVkX.mp3" type="audio/mp3">
  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 2025
 
    </div>
 
    <a class="link" href="#" onclick="location.reload();">Zurück zur Webseite</a>
 
  </div>
 
  <div title="Start/Stopp Sound" id="sound_off"><img src="https://files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div></div>
</div>
 
</center>
`);
 
$('#feuerwerkOverlay').css('display','block');
$('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="https://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="https://files.homepagemodules.de/b104774/a_390_9f889856.png" style="width:30px;border-radius:3px;"><div>Stopp Sound</div>');
    }; 
  });
 
}
</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