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

交互ハイライト・キャッチコピーリスト

複数行のキャッチコピーが順番にハイライトされながら注目を集め続けます。WordPressの理念・強み紹介セクションで複数メッセージを順に見せたいときに便利です。

プレビュー

ソースコード

HTML

<ul class="d02-11-10-list">
          <li>伝わるデザイン。</li>
          <li>届く言葉。</li>
          <li>進化するサイト。</li>
        </ul>

CSS

.d02-11-10-list{list-style:none;margin:0;padding:0;text-align:left}
        .d02-11-10-list li{font-size:17px;font-weight:700;color:#9ca3af;padding:7px 12px;border-radius:6px;transition:color .4s,background .4s,transform .4s}
        .d02-11-10-list li.active{color:#fff;background:linear-gradient(90deg,#4f46e5,#7c3aed);transform:translateX(6px)}
        @media (prefers-reduced-motion: reduce){
          .d02-11-10-list li{transition:none}
        }

JavaScript

(function(){
        var items=document.querySelectorAll('#item-02-11-10 .d02-11-10-list li');
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(reduce){items[0].classList.add('active');return;}
        var idx=0;
        function tick(){
          items.forEach(function(li){li.classList.remove('active');});
          items[idx].classList.add('active');
          idx=(idx+1)%items.length;
        }
        tick();
        setInterval(tick,1600);
      })();

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