パーツ番号 09-06-11 ・ JavaScript使用
ルーレット抽選(ガチャ)演出
ボタンを押すとカラフルなルーレットが勢いよく回転し、減速しながら景品を確定表示します。会員限定の抽選キャンペーンやログインボーナス企画に使えます。
プレビュー
ソースコード
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"> </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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。