自動無限ループで一定方向にスクロールするコンテンツの実装のメモ

はじめに

Webサイトでよく見かける自動で無限ループするコンテンツの実装のメモです。
今回は、リンク要素内のテキストが横にスクロールし続けるボタンを作成します。
※本メモではループに必要なHTMLとCSSのコードのみ記載していますので、全てのコードはcodepenからご確認ください。

See the Pen ticker-text by KAZUKI YOKOUCHI (@tone-design) on CodePen.

HTML

<a class="ticker js-ticker" data-clone="10" data-speed="80" href="#url">
  <span class="ticker__text js-ticker-text">自動無限ループで一定方向にスクロールするコンテンツの実装のメモ</span>
</a>

ticker__textはループするテキスト要素です。テキストの途切れない無限ループを実現するため、実際はテキスト要素を複数連続で記載する必要がありますが、HTMLが煩雑になりがちなので、JavaScriptにで複製の処理を行っております。

data-clone="10"は複製するテキスト要素の数を指定します。テキストが短くループ中に途切れてしまう場合は5以上の数値で調整します。（デフォルト:5）

data-speed="80"はループのスピードを相対的に指定します。（デフォルト:50）
※各カスタム属性値は省略可能です。

CSS

.ticker {
  white-space: nowrap;
  overflow: hidden;
}

テキストを改行なしの1行で表示するためwhite-space: nowrapを指定し、リンク要素からはみ出したテキストをoverflow: hiddenで非表示にします。

.ticker__text {
  display: inline-block;
  animation-name: tickerAnimation; /*animation名を指定*/
  animation-timing-function: linear; /*一定の速度で変化*/
  animation-iteration-count: infinite; /*リピート数は無限*/
}

複数のテキスト要素を1行の横並びとするためdisplay: inline-blockを指定しています。

テキスト要素に各アニメーションの設定を反映します。
本来はアニメーションにかかる時間をanimation-durationで設定しますが、テキスト要素の数や文字数にかかわらず、すべて一定の時間にしたいので、JavaScriptにて時間の設定を行っています。

@keyframes tickerAnimation {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

上記はテキスト要素を左から右へアニメーションで移動する設定です。

最後に

お知らせの新着の1件分とか、特定の投稿記事のテキスト長めの投稿タイトルなどをリンクとして表示したい場合などに便利そうです。

See the Pen ticker-text2 by KAZUKI YOKOUCHI (@tone-design) on CodePen.