Ghirlandă cu Becuri interactive și Sunet ~ Blogul lui Petre Vitan

Widget Ghirlandă de Crăciun cu Becuri Spargibile și Scântei Realizat de petre-vitan

Previzualizare interactivă (Toate becurile sunt active! Treceți cu mouse-ul pentru a le sparge):

Codul sursă complet de copiat pentru Blogspot:

<!-- ======================================================= -->
<!-- GHIRLANDĂ INTERACTIVĂ DE CRĂCIUN CU BECURI SPARGIBILE    -->
<!-- REALIZAT DE PETRE-VITAN                                 -->
<!-- ======================================================= -->
<canvas id="petre-sparks-canvas"></canvas>

<style>
.petre-breaking-lights-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999999;
  pointer-events: none;
  box-sizing: border-box;
}
.petre-main-wire {
  position: absolute;
  width: 100%;
  border-bottom: 2px solid #222;
  top: 0;
  left: 0;
}
.petre-bulbs-holder {
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 10px;
  box-sizing: border-box;
}
.petre-shatter-bulb {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 12px;
  background: #444;
  border-radius: 2px 2px 0 0;
  transform-origin: center top;
  box-sizing: border-box;
  pointer-events: auto;
  flex-shrink: 0;
  cursor: crosshair;
}
.petre-shatter-bulb .glass-body {
  position: absolute;
  width: 24px;
  height: 32px;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
  transition: transform .15s ease-in-out, opacity .15s ease-in-out;
  opacity: 1;
}
.petre-shatter-bulb.broken .glass-body {
  width: 0;
  height: 0;
  opacity: 0;
  box-shadow: none !important;
}
#petre-sparks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999998;
  pointer-events: none;
}
</style>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var canvas = document.getElementById("petre-sparks-canvas"),
      ctx = canvas.getContext("2d"),
      particles = [];

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

  function triggerLocalExplosion(x, y, color) {
    for (var i = 0; i < 20; i++) {
      var angle = Math.random() * Math.PI * 2, speed = Math.random() * 4 + 2;
      particles.push({ x: x, y: y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, alpha: 1, size: Math.random() * 2 + 1, color: color, type: "spark" });
    }
    for (var j = 0; j < 10; j++) {
      var sAngle = Math.random() * Math.PI * 2, sSpeed = Math.random() * 1 + 0.5;
      particles.push({ x: x, y: y, vx: Math.cos(sAngle) * sSpeed, vy: Math.sin(sAngle) * sSpeed, alpha: 0.4, size: Math.random() * 6 + 4, color: "rgba(140,140,140,", type: "smoke" });
    }
  }

  function loopAnimation() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = particles.length - 1; i >= 0; i--) {
      var p = particles[i];
      if ("spark" === p.type) {
        p.vy += 0.05; p.x += p.vx; p.y += p.vy; p.alpha -= 0.02;
        ctx.fillStyle = p.color; ctx.globalAlpha = p.alpha;
        ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
      } else if ("smoke" === p.type) {
        p.x += p.vx; p.y += p.vy; p.size += 0.1; p.alpha -= 0.015;
        ctx.fillStyle = p.color + p.alpha + ")"; ctx.globalAlpha = 1;
        ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
      }
      if (p.alpha <= 0) particles.splice(i, 1);
    }
    ctx.globalAlpha = 1;
    requestAnimationFrame(loopAnimation);
  }
  loopAnimation();

  var container = document.createElement("div");
  container.classList.add("petre-breaking-lights-container");
  document.body.appendChild(container);

  var wire = document.createElement("div");
  wire.classList.add("petre-main-wire");
  container.appendChild(wire);

  var holder = document.createElement("div");
  holder.classList.add("petre-bulbs-holder");
  container.appendChild(holder);

  var audioCtx = null;
  function resumeAudio() {
    if (!audioCtx) {
      try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) {}
    }
    if (audioCtx && "suspended" === audioCtx.state) audioCtx.resume();
  }
  window.addEventListener("click", resumeAudio);
  window.addEventListener("touchstart", resumeAudio);

  var colors = ["#ff0000", "#00ff00", "#007bff", "#ffff00", "#ff00ff", "#00ffff"];
  for (let k = 0; k < 22; k++) {
    let bulb = document.createElement("div");
    bulb.classList.add("petre-shatter-bulb");
    let glass = document.createElement("div");
    glass.classList.add("glass-body");
    let c = colors[k % colors.length];
    glass.style.backgroundColor = c;
    glass.style.boxShadow = "0 8px 20px " + c;
    bulb.appendChild(glass);
    holder.appendChild(bulb);

    var isBroken = !1;
    function processShatter(e) {
      if (!isBroken) {
        isBroken = !0;
        bulb.classList.add("broken");
        playShatterAudio();
        var rect = bulb.getBoundingClientRect(),
            bX = rect.left + rect.width / 2,
            bY = rect.top + rect.height + 10;
        triggerLocalExplosion(bX, bY, c);
        setTimeout(function() {
          bulb.classList.remove("broken");
          isBroken = !1;
        }, 1000);
      }
    }
    bulb.addEventListener("mouseover", processShatter);
    bulb.addEventListener("touchstart", processShatter);
  }

  function playShatterAudio() {
    resumeAudio();
    if (audioCtx) {
      try {
        var o1 = audioCtx.createOscillator(), g1 = audioCtx.createGain();
        o1.type = "sawtooth"; o1.frequency.setValueAtTime(800, audioCtx.currentTime);
        o1.frequency.exponentialRampToValueAtTime(40, audioCtx.currentTime + .1);
        g1.gain.setValueAtTime(.4, audioCtx.currentTime);
        g1.gain.exponentialRampToValueAtTime(.001, audioCtx.currentTime + .1);
        o1.connect(g1); g1.connect(audioCtx.destination);
        o1.start(); o1.stop(audioCtx.currentTime + .11);

        var o2 = audioCtx.createOscillator(), g2 = audioCtx.createGain();
        o2.type = "sine"; o2.frequency.setValueAtTime(3000, audioCtx.currentTime);
        o2.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + .05);
        g2.gain.setValueAtTime(.15, audioCtx.currentTime);
        g2.gain.exponentialRampToValueAtTime(.01, audioCtx.currentTime + .05);
        o2.connect(g2); g2.connect(audioCtx.destination);
        o2.start(); o2.stop(audioCtx.currentTime + .06);
      } catch (err) {}
    }
  }
});
//]]>
</script>

🛠️ Cum se instalează ghirlanda interactivă pe Blogspot:

Copiați scriptul din caseta de mai sus utilizând butonul Copiază Codul.
Accesați panoul administrativ Blogger.
In meniul din stânga, faceți clic pe opțiunea Temă (Theme).
Apăsați pe triunghiul mic de lângă butonul portocaliu/gri „Personalizează” și selectați Editați HTML (Edit HTML).
Faceți un clic în interiorul editorului de cod și apăsați scurtătura Ctrl + F pentru a deschide bara de căutare.
Căutați tag-ul de închidere structurală </body>.
Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
Apăsați pictograma de Salvare (dischetă) din colțul din dreapta-sus al ecranului. Instalația va rula la marginea superioară a blogului!

Ghirlandă cu Becuri interactive și Sunet

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut