【JavaScript】Apple Music風にテキストが流れて、中央にきたらフォーカスする

2024年01月05日

WEBサイト制作

#備忘録
#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はメインビジュアル等で使える、Apple Music風に歌詞が流れるギミックを紹介します！

実装例

こんな感じで
Apple Music風に
テキストを流すことができます
ご覧になっている
皆さんも
ぜひ、実装してみてください
結構楽しいですよ
う〜うう〜
あ〜〜〜あ
え〜〜〜〜〜ええ

HTML例

<div class="apple-music">
  <div class="apple-music-inner">
    <ul class="apple-music-list">
      <li class="apple-music-item">こんな感じで</li>
      <li class="apple-music-item">Apple Music風に</li>
      <li class="apple-music-item">テキストを流すことができます</li>
      <li class="apple-music-item">ご覧になっている</li>
      <li class="apple-music-item">皆さんも</li>
      <li class="apple-music-item">ぜひ、実装してみてください</li>
      <li class="apple-music-item">結構楽しいですよ</li>
      <li class="apple-music-item">う〜うう〜</li>
      <li class="apple-music-item">あ〜〜〜あ</li>
      <li class="apple-music-item">え〜〜〜〜〜ええ</li>
    </ul>
  </div>
</div>

CSS例

.apple-music{
  background-color: #717186;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}
.apple-music-inner{
  position: absolute;
  top: 0px;
  left: 50%;
  transform:translateX(-50%);
}
.apple-music-list{
  list-style: none;
  position: relative;
  width: 100%;
}
.apple-music-item{
  white-space: nowrap;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  margin: 0 auto 30px;
  font-size: 20px;
  transition: 0.6s;
  width: 100%;
}
.is-focus{
  color: #fff;
  text-shadow: 0;
  font-size: 22px;
}

JavaScript例

let appleMusicPos = 150;
let appleMusicList = document.querySelector('.apple-music-list');
let appleMusicHeight = document.querySelector('.apple-music').offsetHeight / 2 - 20;
let appleMusicListItem = document.querySelectorAll('.apple-music-item');
let appleMusicListHeight = appleMusicList.offsetHeight;
let timer = setInterval(function () {
  if (appleMusicPos === appleMusicListHeight) {
    clearInterval(timer);
  } else {
    appleMusicPos -= 1;
    appleMusicList.style.top = appleMusicPos + 'px';
    appleMusicListItem.forEach(function (element, index) {
      setTimeout(function () {
        let elementRect = element.getBoundingClientRect();
        let elementTopRelativeToMusicInner = elementRect.top - document.querySelector('.apple-music-inner').getBoundingClientRect().top;
        if (elementTopRelativeToMusicInner > appleMusicHeight && elementTopRelativeToMusicInner < appleMusicHeight + elementRect.height) {
          element.classList.add('is-focus');
        } else {
          element.classList.remove('is-focus');
        }
      }, index * 50);
    });
  }
}, 50);