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

スタンプ/スクラッチ風インタラクション

クリックでカバーがめくれてクーポンが光りながら現れます。WordPressのキャンペーンや会員特典の演出に使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="coupon">
          <div class="reveal"><span class="code">SAVE30</span><small>30%OFFクーポン</small></div>
          <div class="cover"><span>タップして<br>めくる</span></div>
        </div>

CSS

.d11-02-09 .coupon{position:relative;width:200px;height:120px;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}
        .d11-02-09 .reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#f7971e,#ffd200);color:#5a3a00}
        .d11-02-09 .code{font-size:26px;font-weight:800;letter-spacing:2px}
        .d11-02-09 .reveal small{font-size:12px;font-weight:600}
        .d11-02-09 .cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#8e9eab,#636f7a);color:#fff;font-size:14px;font-weight:700;transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .5s;transform-origin:top}
        .d11-02-09 .coupon.done .cover{transform:rotateX(-100deg);opacity:0}
        .d11-02-09 .coupon.done .reveal{animation:d199glow 1s ease}
        @keyframes d199glow{0%{box-shadow:inset 0 0 0 rgba(255,255,255,0)}40%{box-shadow:inset 0 0 40px rgba(255,255,255,.9)}100%{box-shadow:inset 0 0 0 rgba(255,255,255,0)}}

JavaScript

(function(){
        var r=document.querySelector('#item-11-02-09 .d11-02-09');
        var c=r.querySelector('.coupon');
        c.addEventListener('click',function(){c.classList.add('done');});
      })();

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