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

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
259
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
370
HTMLCSS

【CSS】ボーダー斜めのストライプ背景を作成する方法

2022.10.02
92
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
1253