Written by Kasumi

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 プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
1125
HTMLCSS JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

更新日:2022.09.09
8324
HTMLCSS

CSSで背景の半分だけ単色もしくは画像を指定する方法

2022.12.16
5173
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
9230