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

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

チェックポイント達成スタンプ

「達成!」のスタンプがドンと押されるように出現する演出です。学習サイトのステージクリアや課題達成の記録画面に使えます。

scrolljs

プレビュー

ソースコード

HTML

<div class="d09-06-09-box">
          <div class="d09-06-09-paper">
            <p>ステージ3クリア条件</p>
            <div class="d09-06-09-stamp">達成</div>
          </div>
          <button type="button" class="d09-06-09-btn">チェックポイント通過</button>
        </div>

CSS

.d09-06-09-box{display:flex;flex-direction:column;align-items:center}
        .d09-06-09-paper{position:relative;width:220px;height:130px;border-radius:10px;background:#fff;
          border:1px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
        .d09-06-09-paper p{margin:0;font-size:12px;color:#94a3b8}
        .d09-06-09-stamp{position:absolute;padding:8px 20px;border:3px solid #dc2626;border-radius:8px;
          color:#dc2626;font-size:20px;font-weight:900;letter-spacing:.1em;
          transform:scale(2.4) rotate(-14deg);opacity:0;
          transition:transform .35s cubic-bezier(.2,1.2,.3,1),opacity .2s ease}
        .d09-06-09-box.is-on .d09-06-09-stamp{transform:scale(1) rotate(-14deg);opacity:1}
        .d09-06-09-btn{border:none;border-radius:999px;padding:9px 20px;background:#dc2626;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

JavaScript

(function(){
        var root=document.getElementById('item-09-06-09');
        if(!root)return;
        var box=root.querySelector('.d09-06-09-box');
        var btn=root.querySelector('.d09-06-09-btn');
        btn.addEventListener('click',function(){
          box.classList.remove('is-on');
          void box.offsetWidth;
          box.classList.add('is-on');
        });
      })();

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