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

パーツ番号 09-01-07 ・ JavaScript使用

達成メダル(獲得演出)

クリックするとメダルが回転し、キラッと光って「獲得!」が飛び出します。会員のバッジ取得やゲーミフィケーション演出に使えます。

clickjs3d

プレビュー

ソースコード

HTML

<button class="d09-01-07-medal" type="button" aria-label="メダルを獲得">
          <span class="d09-01-07-disc">
            <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#7a5600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z"/></svg>
          </span>
          <span class="d09-01-07-get">獲得!</span>
        </button>
        <p class="d09-01-07-hint">クリックで獲得演出</p>

CSS

.d09-01-07{flex-direction:column;gap:12px}
        .d09-01-07-medal{position:relative;background:none;border:none;cursor:pointer;padding:8px}
        .d09-01-07-disc{position:relative;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#e0a91b);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.2);overflow:hidden;transition:transform .6s}
        .d09-01-07-disc::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg)}
        .d09-01-07-medal.d09-01-07-go .d09-01-07-disc{transform:rotateY(360deg)}
        .d09-01-07-medal.d09-01-07-go .d09-01-07-disc::after{animation:d09-01-07-flash .6s ease .2s}
        @keyframes d09-01-07-flash{0%{left:-70%}100%{left:140%}}
        .d09-01-07-get{position:absolute;top:-8px;left:50%;transform:translate(-50%,6px);opacity:0;font-size:12px;font-weight:800;color:#e0a91b;pointer-events:none;white-space:nowrap}
        .d09-01-07-medal.d09-01-07-go .d09-01-07-get{animation:d09-01-07-get .9s ease .3s}
        @keyframes d09-01-07-get{0%{opacity:0;transform:translate(-50%,6px)}30%{opacity:1;transform:translate(-50%,-16px)}80%{opacity:1;transform:translate(-50%,-20px)}100%{opacity:0;transform:translate(-50%,-26px)}}
        .d09-01-07-hint{font-size:12px;color:#94a3b8;margin:0}

JavaScript

(function(){
        var root=document.getElementById('item-09-01-07');if(!root)return;
        var btn=root.querySelector('.d09-01-07-medal');
        btn.addEventListener('click',function(){
          btn.classList.remove('d09-01-07-go');void btn.offsetWidth;btn.classList.add('d09-01-07-go');
        });
      })();

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