• HTMLCSS

CSSだけで自動横スクロールするアニメーションを実装する方法

JSなどは使わず、CSSだけで自動横スクロールするアニメーションを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
CSSだけで自動横スクロール by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

テキストが自動で無限横スクールされてるのがわかります。

実装手順は以下の通りです。

HTMLを準備

<!-- 親要素 -->
<div class="parent">
  <!--  自動横スクロールさせたい要素  -->
  <p>横スクロールテキスト横スクロールテキスト横スクロールテキスト</p>
</div>

まずは自動横スクロールさせたい要素をHTMLで用意します。

横スクロール要素とそれを囲う親要素を任意のHTMLタグで作成します。

CSSでアニメーションを付与

// 親要素
.parent {
  overflow: hidden;
}

// 横スクロール要素
p {
  animation: scrollAnime 20s linear infinite;
  white-space: nowrap;
}
@keyframes scrollAnime {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

自動横スクロールさせるCSSです。

自動横スクロールにはanimationプロパティを使用します。

使い方は以下の通りです。

animation: アニメーション名 秒数 linear（等しい速度） infinite（無限）;

@keyframesでアニメーションの流れを指定します。

transform: translateX();を付与。

水平方向に0～100%で移動するように設定します。

横スクロール要素が改行しないようにwhite-space: nowrap;を指定します。

親要素にoverflow: hidden;を付与。

横スクロール要素以外でスクロールされるのを防ぎます。

以上、CSSだけで自動横スクロールの完成です。

まとめ

お知らせ等を自動横スクロールで見せたい時に便利です。

以上で解説を終わります。