文字の無限ループアニメーション

初心者でも実装しやすい文字の無限ループアニメーション。
セクションの区切りに使ったり、薄い大き目の文字で背景に流すのもおススメ。

HTML

<div class="ugkTxtSlider">
  <div class="ugkTxtSlider__inner">
    <!--要素の横いっぱいになるまで複製しておく-->
    <p class="ugkTxtSlider__text">DREAM COME TRUE</p>
    <p class="ugkTxtSlider__text">DREAM COME TRUE</p>
    <p class="ugkTxtSlider__text">DREAM COME TRUE</p>
  </div>
</div>

CSS

.ugkTxtSlider {
  width: 100%;
  /* コンテナのサイズ指定 */
  overflow: hidden;
}
.ugkTxtSlider__inner {
  display: flex;
  column-gap: 2em;
  /* テキスト同士の隙間 */
  width: fit-content;
  /* 中身に合わせて幅を自動調整 */
}
.ugkTxtSlider__inner.animating {
  animation: imgSlider 30s linear infinite;
  /* 早さはここで調整 */
}
@keyframes imgSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.ugkTxtSlider__text {
  font-size: 50px;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

JS

document.addEventListener('DOMContentLoaded',() =>{
  const sliderContainer = document.querySelector('.ugkTxtSlider');
  const sliderLists = sliderContainer.querySelector('.ugkTxtSlider__inner');
  // 元のli要素たちを取得
  const sliderItems = sliderLists.innerHTML;
  // リストの中身を複製して後ろに追加する
  sliderLists.insertAdjacentHTML('beforeend',sliderItems);
  // 複製が終わってからアニメーションクラスを付与
  sliderLists.classList.add('animating');
});

実際の動き

DREAM COME TRUE

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。