パーツ番号 09-06-09 ・ JavaScript使用
チェックポイント達成スタンプ
「達成!」のスタンプがドンと押されるように出現する演出です。学習サイトのステージクリアや課題達成の記録画面に使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。