Ghirlandă cu Becuri interactive și Sunet

🎄 Ghirlandă tip Poligon (Becuri Aprinse Permanent)

Dă un click pe pagină pentru audio. Becurile stau aprinse fix, dar explodează spectaculos când le atingi!

<!-- 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>document.addEventListener("DOMContentLoaded",function(){var e=document.getElementById("petre-sparks-canvas"),t=e.getContext("2d"),n=[];function r(){e.width=window.innerWidth,e.height=window.innerHeight}window.addEventListener("resize",r),r();function o(e,r,o){for(var a=0;a<20;a++){var l=Math.random()*Math.PI*2,i=Math.random()*4+2;n.push({x:e,y:r,vx:Math.cos(l)*i,vy:Math.sin(l)*i,alpha:1,size:Math.random()*2+1,color:o,type:"spark"})}for(var s=0;s<10;s++){var c=Math.random()*Math.PI*2,d=Math.random()*1+0.5;n.push({x:e,y:r,vx:Math.cos(c)*d,vy:Math.sin(c)*d,alpha:0.4,size:Math.random()*6+4,color:"rgba(140,140,140,",type:"smoke"})}}function a(){t.clearRect(0,0,e.width,e.height);for(var r=n.length-1;r>=0;r--){var o=n[r];"spark"===o.type?(o.vy+=0.05,o.x+=o.vx,o.y+=o.vy,o.alpha-=0.02,t.fillStyle=o.color,t.globalAlpha=o.alpha,t.beginPath(),t.arc(o.x,o.y,o.size,0,Math.PI*2),t.fill()):"smoke"===o.type?(o.x+=o.vx,o.y+=o.vy,o.size+=0.1,o.alpha-=0.015,t.fillStyle=o.color+o.alpha+")",t.globalAlpha=1,t.beginPath(),t.arc(o.x,o.y,o.size,0,Math.PI*2),t.fill()):void 0,o.alpha<=0&&n.splice(r,1)}t.globalAlpha=1,requestAnimationFrame(a)}a();var l=document.createElement("div");l.classList.add("petre-breaking-lights-container"),document.body.appendChild(l);var i=document.createElement("div");i.classList.add("petre-main-wire"),l.appendChild(i);var s=document.createElement("div");s.classList.add("petre-bulbs-holder"),l.appendChild(s);var c=null;function d(){if(!c)try{c=new(window.AudioContext||window.webkitAudioContext)}catch(e){}c&&"suspended"===c.state&&c.resume()}window.addEventListener("click",d),window.addEventListener("touchstart",d);var u=["#ff0000","#00ff00","#007bff","#ffff00","#ff00ff","#00ffff"];for(let g=0;g<22;g++){let h=document.createElement("div");h.classList.add("petre-shatter-bulb");let p=document.createElement("div");p.classList.add("glass-body");let m=u[g%u.length];p.style.backgroundColor=m,p.style.boxShadow="0 8px 20px "+m,h.appendChild(p),s.appendChild(h);let y=!1;function f(e){if(!y){y=!0,h.classList.add("broken"),v();var t=h.getBoundingClientRect(),n=t.left+t.width/2,r=t.top+t.height+10;o(n,r,m),setTimeout(function(){h.classList.remove("broken"),y=!1},1e3)}}h.addEventListener("mouseover",f),h.addEventListener("touchstart",f)}function v(){if(d(),c)try{var e=c.createOscillator(),t=c.createGain();e.type="sawtooth",e.frequency.setValueAtTime(800,c.currentTime),e.frequency.exponentialRampToValueAtTime(40,c.currentTime+.1),t.gain.setValueAtTime(.4,c.currentTime),t.gain.exponentialRampToValueAtTime(.001,c.currentTime+.1),e.connect(t),t.connect(c.destination),e.start(),e.stop(c.currentTime+.11);var n=c.createOscillator(),r=c.createGain();n.type="sine",n.frequency.setValueAtTime(3000,c.currentTime),n.frequency.exponentialRampToValueAtTime(800,c.currentTime+.05),r.gain.setValueAtTime(.15,c.currentTime),r.gain.exponentialRampToValueAtTime(.01,c.currentTime+.05),n.connect(r),r.connect(c.destination),n.start(),n.stop(c.currentTime+.06)}catch(o){}}});</script>