CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK

1. Copiază Codul Sursă (Click în casetă sau pe buton)

<!-- CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK -->
<canvas id="canvas-explozie-soc" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999999;"></canvas>

<script>
(function() {
  var canvas = document.getElementById('canvas-explozie-soc');
  var ctx = canvas.getContext('2d');
  var particule = [];
  var undeSoc = [];

  var culoriVii = [
    '#00f6ff', '#03d16a', '#ff007f', '#ffea00', 
    '#ff5722', '#8f003c', '#9d00ff', '#ffffff'
  ];

  function reancadreazaCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  window.addEventListener('resize', reancadreazaCanvas);
  reancadreazaCanvas();

  function UndaSoc(x, y) {
    this.x = x;
    this.y = y;
    this.raza = 5;
    this.vitezaExpansiune = 12;
    this.alfa = 1;
    this.degradare = 0.04;
    this.culoare = culoriVii[Math.floor(Math.random() * culoriVii.length)];
    this.grosimeLinie = 3;
  }

  UndaSoc.prototype.update = function() {
    this.raza += this.vitezaExpansiune;
    this.vitezaExpansiune *= 0.92;
    this.grosimeLinie *= 0.94;
    this.alfa -= this.degradare;
  };

  UndaSoc.prototype.draw = function() {
    if (this.alfa <= 0) return;
    ctx.save();
    ctx.globalAlpha = this.alfa;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.raza, 0, Math.PI * 2);
    ctx.strokeStyle = this.culoare;
    ctx.lineWidth = this.grosimeLinie;
    ctx.shadowBlur = 20;
    ctx.shadowColor = this.culoare;
    ctx.stroke();
    ctx.restore();
  };

  function ParticulaMegaExplozie(x, y, tip) {
    this.x = x;
    this.y = y;
    this.tip = tip;
    var unghi = Math.random() * Math.PI * 2;
    
    if (this.tip === 'scanteie') {
      var viteza = Math.random() * 16 + 8;
      this.vx = Math.cos(unghi) * viteza;
      this.vy = Math.sin(unghi) * viteza - (Math.random() * 3);
      this.raza = Math.random() * 3.5 + 1.5;
      this.culoare = culoriVii[Math.floor(Math.random() * culoriVii.length)];
      this.alfa = 1;
      this.degradare = Math.random() * 0.04 + 0.025;
    } else {
      var vitezaFum = Math.random() * 5 + 1;
      this.vx = Math.cos(unghi) * vitezaFum;
      this.vy = Math.sin(unghi) * vitezaFum - 1.5;
      this.raza = Math.random() * 8 + 5;
      this.culoare = ['#222222', '#3a3a3a', '#4f4f4f'][Math.floor(Math.random() * 3)];
      this.alfa = 0.5;
      this.degradare = Math.random() * 0.02 + 0.015;
    }
  }

  ParticulaMegaExplozie.prototype.update = function() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.tip === 'scanteie') {
      this.vy += 0.35; 
      this.vx *= 0.96; 
      this.vy *= 0.96;
    } else {
      this.vy -= 0.04; 
      this.raza += 0.25; 
      this.vx *= 0.94;
      this.vy *= 0.94;
    }
    this.alfa -= this.degradare;
  };

  ParticulaMegaExplozie.prototype.draw = function() {
    if (this.alfa <= 0) return;
    ctx.save();
    ctx.globalAlpha = this.alfa;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.raza, 0, Math.PI * 2);
    ctx.fillStyle = this.culoare;
    if (this.tip === 'scanteie') {
      ctx.shadowBlur = 18;
      ctx.shadowColor = this.culoare;
    }
    ctx.fill();
    ctx.restore();
  };

  window.addEventListener('click', function(e) {
    undeSoc.push(new UndaSoc(e.clientX, e.clientY));
    for (var i = 0; i < 60; i++) {
      particule.push(new ParticulaMegaExplozie(e.clientX, e.clientY, 'scanteie'));
    }
    for (var j = 0; j < 20; j++) {
      particule.push(new ParticulaMegaExplozie(e.clientX, e.clientY, 'fum'));
    }
  });

  function animeaza() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = undeSoc.length - 1; i >= 0; i--) {
      var u = undeSoc[i];
      u.update();
      if (u.alfa <= 0) { undeSoc.splice(i, 1); } else { u.draw(); }
    }
    for (var j = particule.length - 1; j >= 0; j--) {
      var p = particule[j];
      p.update();
      if (p.alfa <= 0) { particule.splice(j, 1); } else { p.draw(); }
    }
    requestAnimationFrame(animeaza);
  }
  requestAnimationFrame(animeaza);
})();
</script>

<style>
html, body, :root {
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
  scrollbar-color: #05a0a1 #0d1518 !important;
}
::-webkit-scrollbar {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}
::-webkit-scrollbar-track {
  background: #0d1518 !important;
  border-radius: 20px !important;
}
::-webkit-scrollbar-thumb {
  background: #05a0a1 !important;
  background: linear-gradient(180deg, #05a0a1 0%, #0b98ff 100%) !important;
  border-radius: 20px !important;
  border: 3px solid #0d1518 !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #0b98ff !important;
  background: linear-gradient(180deg, #0b98ff 0%, #7e0188 100%) !important;
}
</style>

2. Zonă de Previzualizare Activă

Apasă un click oriunde în interiorul chenarului de mai jos pentru a testa efectul vizual.

Din inimă pentru o inimă

Recent Posts

CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK

1. Copiază Codul Sursă (Click în casetă sau pe buton)

2. Zonă de Previzualizare Activă

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

🥂Timp rămas până la Revelion 🥂

Articole la întâmplare

Ultimile comentarii

Bine de stiut