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で背景画像だけ回転させる方法

2022.12.02
13429
HTMLCSS プログラミング

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

2021.03.02
5078
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
7068
HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
2166