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

カラー&サイズ切替強調ワード

単語が切り替わるたびに色とサイズが同時にパルスするように変化します。WordPressの数字訴求・キーワード訴求の強調演出に向いています。

プレビュー

ソースコード

HTML

<div class="d02-11-07-word">成長</div>

CSS

.d02-11-07-word{font-size:34px;font-weight:900;display:inline-block}
        .d02-11-07-word.pulse{animation:d1177pulse 1.6s cubic-bezier(.34,1.56,.64,1)}
        @keyframes d1177pulse{
          0%{transform:scale(.75);opacity:.4}
          40%{transform:scale(1.25)}
          70%{transform:scale(.95)}
          100%{transform:scale(1);opacity:1}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-07-word.pulse{animation:none}
        }

JavaScript

(function(){
        var el=document.querySelector('#item-02-11-07 .d02-11-07-word');
        var words=['成長','革新','挑戦','進化'];
        var colors=['#ef4444','#3b82f6','#10b981','#f59e0b'];
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        var idx=0;
        function show(){
          el.textContent=words[idx];
          el.style.color=colors[idx];
          if(!reduce){el.classList.remove('pulse');void el.offsetWidth;el.classList.add('pulse');}
          idx=(idx+1)%words.length;
        }
        show();
        if(!reduce){setInterval(show,1800);}
      })();

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