Confetti Burst

DEMO

CODE

<div class="demo-stage cb-stage"><button class="cb-btn" type="button">🎉 CELEBRATE</button></div>

.cb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; overflow:hidden; }
.cb-btn { background:#E91B89; border:none; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.85rem; padding:.7rem 1.5rem; cursor:pointer; border-radius:8px; }
.cb-piece { position:absolute; width:9px; height:9px; pointer-events:none; will-change:transform,opacity; }
@keyframes cb-fall { to { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; } }

(function(){
  var stage = document.querySelector('.cb-stage'), btn = document.querySelector('.cb-btn');
  if(!stage || !btn) return;
  var colors = ['#E91B89','#7B37A8','#5BAADE','#10B981','#FFD166'];
  btn.addEventListener('click', function(){
    var r = btn.getBoundingClientRect(), sr = stage.getBoundingClientRect();
    var ox = r.left - sr.left + r.width / 2, oy = r.top - sr.top + r.height / 2;
    for(var i = 0; i < 28; i++){
      var p = document.createElement('span');
      p.className = 'cb-piece';
      p.style.left = ox + 'px'; p.style.top = oy + 'px';
      p.style.background = colors[i % colors.length];
      var ang = Math.random() * Math.PI * 2, dist = 60 + Math.random() * 120;
      p.style.setProperty('--dx', Math.cos(ang) * dist + 'px');
      p.style.setProperty('--dy', (Math.sin(ang) * dist + 80) + 'px');
      p.style.setProperty('--rot', (Math.random() * 720 - 360) + 'deg');
      p.style.animation = 'cb-fall ' + (0.8 + Math.random() * 0.6) + 's ease-out forwards';
      stage.appendChild(p);
      (function(el){ setTimeout(function(){ el.remove(); }, 1500); })(p);
    }
  });
})();

AI PROMPT

ボタンを押すと紙吹雪が弾けるお祝い演出を作って。クリックでボタン中心から多数のspanを動的生成し、各片にランダムな角度・距離で CSS変数 --dx/--dy/--rot を設定。@keyframes cb-fall で transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) + opacity:0 へ。重力っぽさは --dy に +80 程度足す。終了後 setTimeout で remove。完了・成功・登録のポジティブな瞬間に。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。