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

二重取り消し線プライス表示

旧価格に手書き風の二重線が引かれたあと新価格がふわっと現れます。WordPressのセール・値下げ告知で訂正表現をわかりやすく演出できます。

プレビュー

ソースコード

HTML

<div class="d02-15-09-wrap">
          <span class="d02-15-09-old">通常価格 &yen;9,800<span class="d02-15-09-strike"></span><span class="d02-15-09-strike d02-15-09-strike2"></span></span>
          <span class="d02-15-09-new">今だけ &yen;6,800</span>
        </div>

CSS

.d02-15-09{background:#fff}
        .d02-15-09-wrap{text-align:center}
        .d02-15-09-old{position:relative;display:inline-block;font-size:18px;color:#6b7280;font-weight:700}
        .d02-15-09-strike{position:absolute;left:-4px;right:-4px;top:48%;height:3px;background:#ef4444;border-radius:2px;transform-origin:left;transform:scaleX(0)}
        .d02-15-09-strike2{top:58%;transform:scaleX(0) rotate(-1deg)}
        .d02-15-09-old.d02-15-09-play .d02-15-09-strike{animation:d1809line .35s ease-out forwards}
        .d02-15-09-old.d02-15-09-play .d02-15-09-strike2{animation:d1809line2 .35s ease-out .15s forwards}
        .d02-15-09-new{display:block;margin-top:10px;font-size:26px;font-weight:900;color:#dc2626;opacity:0;transform:translateY(6px)}
        .d02-15-09-new.d02-15-09-show{animation:d1809up .5s ease-out forwards}
        @keyframes d1809line{to{transform:scaleX(1)}}
        @keyframes d1809line2{to{transform:scaleX(1) rotate(-1deg)}}
        @keyframes d1809up{to{opacity:1;transform:translateY(0)}}
        @media (prefers-reduced-motion: reduce){
          .d02-15-09-strike,.d02-15-09-strike2{transform:scaleX(1)!important;animation:none!important}
          .d02-15-09-new{opacity:1!important;transform:none!important;animation:none!important}
        }

JavaScript

(function(){
        var old=document.querySelector('.d02-15-09-old');
        var neu=document.querySelector('.d02-15-09-new');
        if(!old||!neu)return;
        var timer=null;
        function play(){
          old.classList.remove('d02-15-09-play');neu.classList.remove('d02-15-09-show');
          void old.offsetWidth;
          old.classList.add('d02-15-09-play');
          setTimeout(function(){neu.classList.add('d02-15-09-show');},700);
        }
        play();
        timer=setInterval(play,3200);
      })();

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