Forum - Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1+2

<style>
.start_ani {
  display: block !important;
  position:absolute;
  z-index:99999;
  left:0; 
  top:0;
  right:0; 
  margin: auto;
}
.start_anim {
  display:inline-block;
  background:#eeeeee !important; 
  color: #000000;
  font-weight:bold; 
  border-radius:9px; 
  padding:5px 20px; 
  border:5px double #aaaaaa; 
  cursor: pointer; 
  margin: 0 15px;
}
.start_anim:hover {
  background:#ffffff;
}
.start_anim:empty {
  display:none;
}
.start_img {
  display:inline-block;
  vertical-align:middle;
  cursor: pointer; 
}
/* Breite und Höhe der Animation */
.toggle_ani {
  width:100%;
}
.sound_img {
  width:40px;
  border-radius:50%;
  margin:10px;
  padding:10px;
  background:#ffffff;
  position:absolute;  
  z-index:999998;
}
#sound_off {
  text-align:left;
}
.intro_close {
  font-size: 30px;
  font-weight:bold;
  color:#000000; 
  right:10px;
  border-radius:50%;
  margin:20px;
  padding:2px 10px;
  background:#ffffff;
  position:absolute;  
  z-index:999997;
}
.intro_close:hover, .sound_img:hover  {
  background:#aaaaaa;
}
</style>
 
<img class="start_img" src="https://files.homepagemodules.de/b104774/a_471_0b886575.png"><span class="start_anim">Alles Gute zum Geburtstag</span>
 
<canvas id="c" class="toggle_ani" style="display:none;">&nbsp;</canvas>
 
<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 type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>  
<script>
function start_intro() { 
 
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
 
hw = w / 2, /* half-width */
hh = h / 2,
 
opts = {
  strings: ['HAPPY', 'BIRTHDAY', ' USER!'],
  charSize: 50, /* Schriftgröße */
  charSpacing: 45,  /* Buchstabenabstand */
  lineHeight: 100, /* Zeilenabstand */
 
  cx: w / 2,
  cy: h / 2,
 
  fireworkPrevPoints: 10,
  fireworkBaseLineWidth: 5,
  fireworkAddedLineWidth: 8,
  fireworkSpawnTime: 300, /* Zeit Intro 1 */
  fireworkBaseReachTime: 30,
  fireworkAddedReachTime: 30,
  fireworkCircleBaseSize: 20,
  fireworkCircleAddedSize: 10,
  fireworkCircleBaseTime: 30,
  fireworkCircleAddedTime: 30,
  fireworkCircleFadeBaseTime: 10,
  fireworkCircleFadeAddedTime: 5,
  fireworkBaseShards: 5,
  fireworkAddedShards: 5,
  fireworkShardPrevPoints: 3,
  fireworkShardBaseVel: 4,
  fireworkShardAddedVel: 2,
  fireworkShardBaseSize: 3,
  fireworkShardAddedSize: 3,
  gravity: .1,
  upFlow: -.1,
  letterContemplatingWaitTime: 1000, /* Wartezeit Intro 2 */
  balloonSpawnTime: 20,
  balloonBaseInflateTime: 10,
  balloonAddedInflateTime: 10,
  balloonBaseSize: 20,
  balloonAddedSize: 20,
  balloonBaseVel: .4,
  balloonAddedVel: .4,
  balloonBaseRadian: -(Math.PI / 2 - .5),
  balloonAddedRadian: -1 },
 
calc = {
  totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length) },
 
Tau = Math.PI * 2,
TauQuarter = Tau / 4,
 
letters = [];
 
ctx.font = opts.charSize + 'px Verdana';
 
function Letter(char, x, y) {
  this.char = char;
  this.x = x;
  this.y = y;
 
  this.dx = -ctx.measureText(char).width / 2;
  this.dy = +opts.charSize / 2;
 
  this.fireworkDy = this.y - hh;
 
  var hue = x / calc.totalWidth * 360;
 
  this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
  this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
  this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
  this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);
 
  this.reset();
}
Letter.prototype.reset = function () {
 
  this.phase = 'firework';
  this.tick = 0;
  this.spawned = false;
  this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
  this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
  this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
  this.prevPoints = [[0, hh, 0]];
};
Letter.prototype.step = function () {
 
  if (this.phase === 'firework') {
 
    if (!this.spawned) {
 
      ++this.tick;
      if (this.tick >= this.spawningTime) {
 
        this.tick = 0;
        this.spawned = true;
      }
 
    } else {
 
      ++this.tick;
 
      var linearProportion = this.tick / this.reachTime,
      armonicProportion = Math.sin(linearProportion * TauQuarter),
 
      x = linearProportion * this.x,
      y = hh + armonicProportion * this.fireworkDy;
 
      if (this.prevPoints.length > opts.fireworkPrevPoints)
      this.prevPoints.shift();
 
      this.prevPoints.push([x, y, linearProportion * this.lineWidth]);
 
      var lineWidthProportion = 1 / (this.prevPoints.length - 1);
 
      for (var i = 1; i < this.prevPoints.length; ++i) {
 
        var point = this.prevPoints[i],
        point2 = this.prevPoints[i - 1];
 
        ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
        ctx.lineWidth = point[2] * lineWidthProportion * i;
        ctx.beginPath();
        ctx.moveTo(point[0], point[1]);
        ctx.lineTo(point2[0], point2[1]);
        ctx.stroke();
 
      }
 
      if (this.tick >= this.reachTime) {
 
        this.phase = 'contemplate';
 
        this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
        this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
        this.circleCreating = true;
        this.circleFading = false;
 
        this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
        this.tick = 0;
        this.tick2 = 0;
 
        this.shards = [];
 
        var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
        angle = Tau / shardCount,
        cos = Math.cos(angle),
        sin = Math.sin(angle),
 
        x = 1,
        y = 0;
 
        for (var i = 0; i < shardCount; ++i) {
          var x1 = x;
          x = x * cos - y * sin;
          y = y * cos + x1 * sin;
 
          this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
        }
      }
 
    }
  } else if (this.phase === 'contemplate') {
 
    ++this.tick;
 
    if (this.circleCreating) {
 
      ++this.tick2;
      var proportion = this.tick2 / this.circleCompleteTime,
      armonic = -Math.cos(proportion * Math.PI) / 2 + .5;
 
      ctx.beginPath();
      ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
      ctx.beginPath();
      ctx.arc(this.x, this.y, armonic * this.circleFinalSize, 0, Tau);
      ctx.fill();
 
      if (this.tick2 > this.circleCompleteTime) {
        this.tick2 = 0;
        this.circleCreating = false;
        this.circleFading = true;
      }
    } else if (this.circleFading) {
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      ++this.tick2;
      var proportion = this.tick2 / this.circleFadeTime,
      armonic = -Math.cos(proportion * Math.PI) / 2 + .5;
 
      ctx.beginPath();
      ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - armonic);
      ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
      ctx.fill();
 
      if (this.tick2 >= this.circleFadeTime)
      this.circleFading = false;
 
    } else {
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
    }
 
    for (var i = 0; i < this.shards.length; ++i) {
 
      this.shards[i].step();
 
      if (!this.shards[i].alive) {
        this.shards.splice(i, 1);
        --i;
      }
    }
 
    if (this.tick > opts.letterContemplatingWaitTime) {
 
      this.phase = 'balloon';
 
      this.tick = 0;
      this.spawning = true;
      this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
      this.inflating = false;
      this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
      this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;
 
      var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
      vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
 
      this.vx = Math.cos(rad) * vel;
      this.vy = Math.sin(rad) * vel;
    }
  } else if (this.phase === 'balloon') {
 
    ctx.strokeStyle = this.lightColor.replace('light', 80);
 
    if (this.spawning) {
 
      ++this.tick;
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      if (this.tick >= this.spawnTime) {
        this.tick = 0;
        this.spawning = false;
        this.inflating = true;
      }
    } else if (this.inflating) {
 
      ++this.tick;
 
      var proportion = this.tick / this.inflateTime,
      x = this.cx = this.x,
      y = this.cy = this.y - this.size * proportion;
 
      ctx.fillStyle = this.alphaColor.replace('alp', proportion);
      ctx.beginPath();
      generateBalloonPath(x, y, this.size * proportion);
      ctx.fill();
 
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x, this.y);
      ctx.stroke();
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      if (this.tick >= this.inflateTime) {
        this.tick = 0;
        this.inflating = false;
      }
 
    } else {
 
      this.cx += this.vx;
      this.cy += this.vy += opts.upFlow;
 
      ctx.fillStyle = this.color;
      ctx.beginPath();
      generateBalloonPath(this.cx, this.cy, this.size);
      ctx.fill();
 
      ctx.beginPath();
      ctx.moveTo(this.cx, this.cy);
      ctx.lineTo(this.cx, this.cy + this.size);
      ctx.stroke();
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);
 
      if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
      this.phase = 'done';
 
    }
  }
};
function Shard(x, y, vx, vy, color) {
 
  var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
 
  this.vx = vx * vel;
  this.vy = vy * vel;
 
  this.x = x;
  this.y = y;
 
  this.prevPoints = [[x, y]];
  this.color = color;
 
  this.alive = true;
 
  this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
}
Shard.prototype.step = function () {
 
  this.x += this.vx;
  this.y += this.vy += opts.gravity;
 
  if (this.prevPoints.length > opts.fireworkShardPrevPoints)
  this.prevPoints.shift();
 
  this.prevPoints.push([this.x, this.y]);
 
  var lineWidthProportion = this.size / this.prevPoints.length;
 
  for (var k = 0; k < this.prevPoints.length - 1; ++k) {
 
    var point = this.prevPoints[k],
    point2 = this.prevPoints[k + 1];
 
    ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
    ctx.lineWidth = k * lineWidthProportion;
    ctx.beginPath();
    ctx.moveTo(point[0], point[1]);
    ctx.lineTo(point2[0], point2[1]);
    ctx.stroke();
 
  }
 
  if (this.prevPoints[0][1] > hh)
  this.alive = false;
};
function generateBalloonPath(x, y, size) {
 
  ctx.moveTo(x, y);
  ctx.bezierCurveTo(x - size / 2, y - size / 2,
  x - size / 4, y - size,
  x, y - size);
  ctx.bezierCurveTo(x + size / 4, y - size,
  x + size / 2, y - size / 2,
  x, y);
}
 
function anim() {
 
  window.requestAnimationFrame(anim);
 
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, w, h);
 
  ctx.translate(hw, hh);
 
  var done = true;
  for (var l = 0; l < letters.length; ++l) {
 
    letters[l].step();
    if (letters[l].phase !== 'done')
    done = false;
  }
 
  ctx.translate(-hw, -hh);
 
  if (done)
  for (var l = 0; l < letters.length; ++l)
  letters[l].reset();
}
 
for (var i = 0; i < opts.strings.length; ++i) {
  for (var j = 0; j < opts.strings[i].length; ++j) {
    letters.push(new Letter(opts.strings[i][j],
    j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
    i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
  }
}
 
anim();
 
window.addEventListener('resize', function () {
 
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
 
  hw = w / 2;
  hh = h / 2;
 
  ctx.font = opts.charSize + 'px Verdana';
});
 
 
/* Stop Animation */
function stop_intro(){
  location.reload();
};
  setTimeout(stop_intro, 60000);
 
/* Sound Start / Stop / Intro schließen */
$('body').prepend('<div id="sound_off"><img title="Start/Stopp Sound" class="sound_img" src="https://files.homepagemodules.de/b104774/a_389_0d1ec095.png"></div>');
 
var playing = false; 
$('#sound_off').on('click',function() {
  if (playing == true) {
    document.getElementById('audioplay_feuer').pause();
    playing = false;
    $(this).html('<img class="sound_img" src="https://files.homepagemodules.de/b104774/a_389_0d1ec095.png">'); 
  } else {
    document.getElementById('audioplay_feuer').play(); 
    playing = true;
    $(this).html('<img class="sound_img" src="https://files.homepagemodules.de/b104774/a_390_9f889856.png">');
  }; 
});
  
/* Scroll nach oben */
$('html, body').animate({scrollTop: $('body').offset().top});
  
/* Intro beenden */
$('body').prepend('<div title="Beenden!" class="intro_close">&#10006;</div>');
$('.toggle_ani, .intro_close').on('click',function(){
  location.reload();
});
  
};
</script>
 
<script>
/* Intro starten */
$('.start_anim, .start_img').on('click',function(){ 
  start_intro(); 
  $('.toggle_ani').toggleClass('start_ani'); 
  $('body').css({'overflow':'hidden','cursor':'pointer'}); 
}); 
</script>
 

<style>
.start_ani {
  display: block !important;
  position:fixed;
  z-index:99999;
  left:0; 
  top:0;
  right:0; 
  margin: auto;
}
.start_anim {
  display:inline-block;
  background:#eeeeee !important; 
  color: #000000;
  font-weight:bold; 
  border-radius:9px; 
  padding:5px 20px; 
  border:5px double #aaaaaa; 
  cursor: pointer; 
  margin-left: 5px;
}
.start_anim:hover {
  background:#ffffff;
}
.start_anim:empty {
  display:none;
}
.start_img {
  display:inline-block;
  vertical-align:middle;
  cursor: pointer; 
}
 
.toggle_ani {
  width:100%;
}
.sound_img {
  width:40px;
  border-radius:50%;
  left:10px;
  margin:20px;
  padding:10px;
  background:#ffffff;
  position:absolute;  
  z-index:999998;
}
#sound_off {
  text-align:left;
}
.intro_close {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight:bold;
  color:#000000; 
  right:10px;
  border-radius:50%;
  margin:20px;
  padding:7px 10px;
  background:#ffffff;
  position:absolute;  
  z-index:999997;
}
.intro_close:hover, .sound_img:hover  {
  background:#aaaaaa;
}
</style>
 
<canvas id=c class="toggle_ani" style="display:none;"></canvas>
 
<audio  id="audioplay_feuer">
  <source src="https://files.homepagemodules.de/b104774/f46t1743p4728n2_rGWegVkX.mp3" type="audio/mpeg">
  Ihr Browser kann die Audio-Datei nicht wiedergeben!
</audio>
 
 
<script>
function start_intro() {
//$('body').prepend(`<canvas id=c class="toggle_ani" style="display:none;"></canvas>`);
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
 
hw = w / 3, // half-width
hh = h / 2,
 
opts = {
 // strings: 'HAPPY', 'BIRTHDAY', 'Wolfgang'],
 
  strings: [''+zeile_a+'', ''+zeile_b+'', ''+zeile_c+''],
  {{template==177.start}} 
  charSize: 20, // Schriftgröße - Mobil
  charSpacing: 30,  // Buchstabenabstand - Mobil
  lineHeight: 60, // Zeilenabstand - Mobil
  {{template==177.end}}
  
  {{template!==177.start}} 
  charSize: 35, // Schriftgröße - Desktop
  charSpacing: 50,  // Buchstabenabstand - Desktop
  lineHeight: 100, // Zeilenabstand - Desktop
  {{template!==177.end}}
 
  cx: w / 2,
  cy: h / 2,
 
  fireworkPrevPoints: 10,
  fireworkBaseLineWidth: 5,
  fireworkAddedLineWidth: 8,
  fireworkSpawnTime: 300, // Zeit Intro 1
  fireworkBaseReachTime: 30,
  fireworkAddedReachTime: 30,
  fireworkCircleBaseSize: 20,
  fireworkCircleAddedSize: 10,
  fireworkCircleBaseTime: 30,
  fireworkCircleAddedTime: 30,
  fireworkCircleFadeBaseTime: 10,
  fireworkCircleFadeAddedTime: 5,
  fireworkBaseShards: 5,
  fireworkAddedShards: 5,
  fireworkShardPrevPoints: 3,
  fireworkShardBaseVel: 4,
  fireworkShardAddedVel: 2,
  fireworkShardBaseSize: 3,
  fireworkShardAddedSize: 3,
  gravity: .1,
  upFlow: -.1,
  letterContemplatingWaitTime: 1000, // Wartezeit Intro 2
  balloonSpawnTime: 20,
  balloonBaseInflateTime: 10,
  balloonAddedInflateTime: 10,
  balloonBaseSize: 20,
  balloonAddedSize: 20,
  balloonBaseVel: .4,
  balloonAddedVel: .4,
  balloonBaseRadian: -(Math.PI / 2 - .5),
  balloonAddedRadian: -1 },
 
calc = {
  totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length) },
 
Tau = Math.PI * 2,
TauQuarter = Tau / 4,
 
letters = [];
 
ctx.font = opts.charSize + 'px Arial';
 
function Letter(char, x, y) {
  this.char = char;
  this.x = x;
  this.y = y;
 
  this.dx = -ctx.measureText(char).width / 2;
  this.dy = +opts.charSize / 2;
 
  this.fireworkDy = this.y - hh;
 
  var hue = x / calc.totalWidth * 360;
 
  this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
  this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
  this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
  this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);
 
  this.reset();
}
 
Letter.prototype.reset = function () {
 
  this.phase = 'firework';
  this.tick = 0;
  this.spawned = false;
  this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
  this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
  this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
  this.prevPoints = [[0, hh, 0]];
};
 
Letter.prototype.step = function () {
 
  if (this.phase === 'firework') {
 
    if (!this.spawned) {
 
      ++this.tick;
      if (this.tick >= this.spawningTime) {
 
        this.tick = 0;
        this.spawned = true;
      }
 
    } else {
 
      ++this.tick;
 
      var linearProportion = this.tick / this.reachTime,
      armonicProportion = Math.sin(linearProportion * TauQuarter),
 
      x = linearProportion * this.x,
      y = hh + armonicProportion * this.fireworkDy;
 
      if (this.prevPoints.length > opts.fireworkPrevPoints)
      this.prevPoints.shift();
 
      this.prevPoints.push([x, y, linearProportion * this.lineWidth]);
 
      var lineWidthProportion = 1 / (this.prevPoints.length - 1);
 
      for (var i = 1; i < this.prevPoints.length; ++i) {
 
        var point = this.prevPoints[i],
        point2 = this.prevPoints[i - 1];
 
        ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
        ctx.lineWidth = point[2] * lineWidthProportion * i;
        ctx.beginPath();
        ctx.moveTo(point[0], point[1]);
        ctx.lineTo(point2[0], point2[1]);
        ctx.stroke();
 
      }
 
      if (this.tick >= this.reachTime) {
 
        this.phase = 'contemplate';
 
        this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
        this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
        this.circleCreating = true;
        this.circleFading = false;
 
        this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
        this.tick = 0;
        this.tick2 = 0;
 
        this.shards = [];
 
        var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
        angle = Tau / shardCount,
        cos = Math.cos(angle),
        sin = Math.sin(angle),
 
        x = 1,
        y = 0;
 
        for (var i = 0; i < shardCount; ++i) {
          var x1 = x;
          x = x * cos - y * sin;
          y = y * cos + x1 * sin;
 
          this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
        }
      }
 
    }
  } else if (this.phase === 'contemplate') {
 
    ++this.tick;
 
    if (this.circleCreating) {
 
      ++this.tick2;
      var proportion = this.tick2 / this.circleCompleteTime,
      armonic = -Math.cos(proportion * Math.PI) / 2 + .5;
 
      ctx.beginPath();
      ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
      ctx.beginPath();
      ctx.arc(this.x, this.y, armonic * this.circleFinalSize, 0, Tau);
      ctx.fill();
 
      if (this.tick2 > this.circleCompleteTime) {
        this.tick2 = 0;
        this.circleCreating = false;
        this.circleFading = true;
      }
    } else if (this.circleFading) {
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      ++this.tick2;
      var proportion = this.tick2 / this.circleFadeTime,
      armonic = -Math.cos(proportion * Math.PI) / 2 + .5;
 
      ctx.beginPath();
      ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - armonic);
      ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
      ctx.fill();
 
      if (this.tick2 >= this.circleFadeTime)
      this.circleFading = false;
 
    } else {
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
    }
 
    for (var i = 0; i < this.shards.length; ++i) {
 
      this.shards[i].step();
 
      if (!this.shards[i].alive) {
        this.shards.splice(i, 1);
        --i;
      }
    }
 
    if (this.tick > opts.letterContemplatingWaitTime) {
 
      this.phase = 'balloon';
 
      this.tick = 0;
      this.spawning = true;
      this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
      this.inflating = false;
      this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
      this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;
 
      var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
      vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
 
      this.vx = Math.cos(rad) * vel;
      this.vy = Math.sin(rad) * vel;
    }
  } else if (this.phase === 'balloon') {
 
    ctx.strokeStyle = this.lightColor.replace('light', 80);
 
    if (this.spawning) {
 
      ++this.tick;
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      if (this.tick >= this.spawnTime) {
        this.tick = 0;
        this.spawning = false;
        this.inflating = true;
      }
    } else if (this.inflating) {
 
      ++this.tick;
 
      var proportion = this.tick / this.inflateTime,
      x = this.cx = this.x,
      y = this.cy = this.y - this.size * proportion;
 
      ctx.fillStyle = this.alphaColor.replace('alp', proportion);
      ctx.beginPath();
      generateBalloonPath(x, y, this.size * proportion);
      ctx.fill();
 
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x, this.y);
      ctx.stroke();
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
      if (this.tick >= this.inflateTime) {
        this.tick = 0;
        this.inflating = false;
      }
 
    } else {
 
      this.cx += this.vx;
      this.cy += this.vy += opts.upFlow;
 
      ctx.fillStyle = this.color;
      ctx.beginPath();
      generateBalloonPath(this.cx, this.cy, this.size);
      ctx.fill();
 
      ctx.beginPath();
      ctx.moveTo(this.cx, this.cy);
      ctx.lineTo(this.cx, this.cy + this.size);
      ctx.stroke();
 
      ctx.fillStyle = this.lightColor.replace('light', 70);
      ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);
 
      if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
      this.phase = 'done';
 
    }
  }
};
 
function Shard(x, y, vx, vy, color) {
 
  var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
 
  this.vx = vx * vel;
  this.vy = vy * vel;
 
  this.x = x;
  this.y = y;
 
  this.prevPoints = [[x, y]];
  this.color = color;
 
  this.alive = true;
 
  this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
}
Shard.prototype.step = function () {
 
  this.x += this.vx;
  this.y += this.vy += opts.gravity;
 
  if (this.prevPoints.length > opts.fireworkShardPrevPoints)
  this.prevPoints.shift();
 
  this.prevPoints.push([this.x, this.y]);
 
  var lineWidthProportion = this.size / this.prevPoints.length;
 
  for (var k = 0; k < this.prevPoints.length - 1; ++k) {
 
    var point = this.prevPoints[k],
    point2 = this.prevPoints[k + 1];
 
    ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
    ctx.lineWidth = k * lineWidthProportion;
    ctx.beginPath();
    ctx.moveTo(point[0], point[1]);
    ctx.lineTo(point2[0], point2[1]);
    ctx.stroke();
 
  }
 
  if (this.prevPoints[0][1] > hh)
  this.alive = false;
};
function generateBalloonPath(x, y, size) {
 
  ctx.moveTo(x, y);
  ctx.bezierCurveTo(x - size / 2, y - size / 2,
  x - size / 4, y - size,
  x, y - size);
  ctx.bezierCurveTo(x + size / 4, y - size,
  x + size / 2, y - size / 2,
  x, y);
}
 
function anim() {
 
  window.requestAnimationFrame(anim);
 
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, w, h);
 
  ctx.translate(hw, hh);
 
  var done = true;
  for (var l = 0; l < letters.length; ++l) {
 
    letters[l].step();
    if (letters[l].phase !== 'done')
    done = false;
  }
 
  ctx.translate(-hw, -hh);
 
  if (done)
  for (var l = 0; l < letters.length; ++l)
  letters[l].reset();
}
 
for (var i = 0; i < opts.strings.length; ++i) {
  for (var j = 0; j < opts.strings[i].length; ++j) {
    letters.push(new Letter(opts.strings[i][j],
    j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
    i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
  }
}
 
anim();
 
window.addEventListener('resize', function () {
 
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
 
  hw = w / 2;
  hh = h / 2;
 
  ctx.font = opts.charSize + 'px Arial';
});
 
// Stop Animation
function stop_intro(){
  location.reload();
};
  setTimeout(stop_intro, 90000);
};
  
// start_intro(); 
//# sourceURL=pen.js
</script>
 

<script>
window.addEventListener('load', function ( ) {
// Sound Start / Stop / Intro schließen
  $('body').prepend('<div id="sound_off"><img title="Start/Stopp Sound" class="sound_img" src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png" style="display:none;"></div>');
 
var playing = false; 
$('#sound_off').on('click',function() {
  if (playing == true) {
    document.getElementById('audioplay_feuer').pause();
    playing = false;
    $(this).html('<img class="sound_img" src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png">'); 
  } else {
    document.getElementById('audioplay_feuer').play(); 
    playing = true;
    $(this).html('<img class="sound_img" src="//files.homepagemodules.de/b104774/a_390_9f889856.png">');
  }; 
});
  
// Intro beenden 
$('body').prepend('<div title="Beenden!" class="intro_close" style="display:none;">&#10006;</div>');
$('.toggle_ani, .intro_close').on('click',function(){
  location.reload();
});
 
$('.start_anim, .start_img').on('click',function(){ 
  start_intro(); 
  $('.toggle_ani').toggleClass('start_ani');  
  $('body').css({'overflow':'hidden','cursor':'pointer'}); 
  $('.sound_img, .intro_close').show(); 
  // Scroll nach oben
  $('html, body').animate({scrollTop: $('body').offset().top});
});
  
});
</script>
 

[Geburtstag={{zeilea}}={{zeileb}}={{zeilec}}={{img}}={{text}}]
 

<img class="start_img" src="{{img}}"><span class="start_anim">{{text}}</span><script>var zeile_a='{{zeilea}}'; var zeile_b='{{zeileb}}'; var zeile_c='{{zeilec}}';</script>
 

//files.homepagemodules.de/b2001010/a_485.png
 

Reihenfolge: 0
 

<div onclick="xob_insert(`[Geburtstag=HAPPY=BIRTHDAY=WERTER USER=https://files.homepagemodules.de/b104774/a_471_0b886575.png=Alles Gute zum Geburtstag]`,``)" class="xob_icon_cont" id="icon_11111"><img alt="Feuerwerk" title="Anl&#228;sse mit Feuerwerk" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_485.png"></div>