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だけで自動横スクロールの完成です。

まとめ

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

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

関連記事

HTMLCSS JavaScript プログラミング

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2020.03.23
306
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
295
HTMLCSS プログラミング

html・CSSでテキスト文章を縦書きにする方法

2021.12.22
37
HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
59