← 動的パーツギャラリーへ戻る

パーツ番号 09-06-11 ・ JavaScript使用

ルーレット抽選(ガチャ)演出

ボタンを押すとカラフルなルーレットが勢いよく回転し、減速しながら景品を確定表示します。会員限定の抽選キャンペーンやログインボーナス企画に使えます。

clickjs3d

プレビュー

ソースコード

HTML

<div class="d09-06-11-box">
          <div class="d09-06-11-wrap">
            <div class="d09-06-11-wheel"></div>
            <span class="d09-06-11-pointer">▼</span>
          </div>
          <button type="button" class="d09-06-11-btn">スピンして抽選</button>
          <p class="d09-06-11-result">&nbsp;</p>
        </div>

CSS

.d09-06-11-box{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d09-06-11-wrap{position:relative;width:100px;height:100px}
        .d09-06-11-wheel{width:100px;height:100px;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.15);background:conic-gradient(#f59e0b 0 60deg,#f43f5e 60deg 120deg,#8b5cf6 120deg 180deg,#3b82f6 180deg 240deg,#10b981 240deg 300deg,#ec4899 300deg 360deg);transition:transform 2.4s cubic-bezier(.12,.85,.18,1)}
        .d09-06-11-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);color:#1e293b;font-size:16px}
        .d09-06-11-btn{border:none;border-radius:999px;padding:9px 22px;background:#1e293b;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}
        .d09-06-11-result{margin:0;font-size:12.5px;font-weight:700;color:#dc2626;min-height:16px}

JavaScript

(function(){
        var root=document.getElementById('item-09-06-11');
        if(!root)return;
        var wheel=root.querySelector('.d09-06-11-wheel');
        var btn=root.querySelector('.d09-06-11-btn');
        var result=root.querySelector('.d09-06-11-result');
        var prizes=['特賞 当選','2等 500pt','ハズレ','3等 100pt','もう一回','1等 1000pt'];
        var angle=0, spinning=false;
        btn.addEventListener('click',function(){
          if(spinning)return;
          spinning=true;
          result.textContent='';
          var idx=Math.floor(Math.random()*prizes.length);
          var target=360*5+(360-idx*60-30);
          angle+=target;
          wheel.style.transform='rotate('+angle+'deg)';
          setTimeout(function(){
            result.textContent=prizes[idx]+'!';
            spinning=false;
          },2450);
        });
      })();

クラス名 .d09-06-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。