パーツ番号 07-06-06 ・ CSSのみ

歌詞シンクロハイライト演出

再生の進行に合わせて歌詞の行が順番にハイライトされていくカラオケ風の演出です。

css

プレビュー

ソースコード

HTML

<div class="lyrics07-06-06">
          <p>灯りが滲む夜道を</p>
          <p class="active07-06-06">歩き出す君の背中</p>
          <p>遠くで鳴る汽笛の音</p>
          <p>まだ見ぬ明日へ</p>
        </div>

CSS

.d07-06-06 .lyrics07-06-06{ text-align:center; font-size:14px; line-height:2.1; color:#c7c7d1; }
        .d07-06-06 .lyrics07-06-06 p{ margin:0; transition:color .3s, transform .3s; opacity:.5; }
        .d07-06-06 .lyrics07-06-06 .active07-06-06{ color:#111; font-weight:700; opacity:1; transform:scale(1.08); animation:glow07-06-06 1.8s ease-in-out infinite; }
        @keyframes glow07-06-06{ 0%,100%{ text-shadow:0 0 0 rgba(79,70,229,0); } 50%{ text-shadow:0 0 10px rgba(79,70,229,.35); } }

JavaScript

(function(){
        var root = document.querySelector('.d07-06-06');
        var lines = root.querySelectorAll('.lyrics07-06-06 p');
        var idx = 1;
        setInterval(function(){
          lines.forEach(function(l){ l.classList.remove('active07-06-06'); });
          idx = (idx + 1) % lines.length;
          lines[idx].classList.add('active07-06-06');
        }, 1800);
      })();

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