こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを訪れたとき、横に流れる文字を見かけたことはありませんか？
例えば、ニュースサイトのテロップや、ECサイトでのキャンペーン情報など、視線を引き付ける効果があります。
このような横スクロールのアニメーションは、JavaScriptを使わなくてもCSSだけで簡単に実装できます。
しかも、無限ループで動かし続けることが可能！
今回は、CSSのkeyframesアニメーションを活用して、シンプルなコードで実現する方法を紹介します。
CSSだけで横スクロール無限ループを実装する
完成イメージ
下記のように、文字が左から右へ流れ続けるアニメーションを作成します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
コードの解説
1. 親要素（.marquee）の役割
- overflow: hidden; → はみ出たテキストを非表示にする
- white-space: nowrap; → テキストを折り返さず、横一列に表示
- position: relative; → 子要素のアニメーション位置を調整
2. テキスト部分（.marquee p）の設定
- display: inline-block; → インライン要素として横並びにする
- padding-left: 100%; → 初期位置を画面外（右端）に設定
- animation: marquee-animation 10s linear infinite; → 10秒ごとに繰り返し動かす
3. keyframesを使ったアニメーション
- from { transform: translateX(0%); } → 初期位置
- to { transform: translateX(-100%); } → テキストが左端へ移動
カスタマイズのポイント
このアニメーションをカスタマイズして、より魅力的なデザインにする方法を紹介します。
スクロール速度を調整
現在のコードでは animation: marquee-animation 10s linear infinite; となっていますが、速度を変更するには秒数（10s）を変えるだけでOKです。
例えば、5秒でスクロールさせる場合
.marquee p { animation: marquee-animation 5s linear infinite; /* スピードを速くする */ } 逆に、ゆっくり流す場合は15秒や20秒に設定しましょう。
スクロールの方向を逆にする
デフォルトでは「右 → 左」に流れていますが、「左 → 右」に流したい場合は、translateXの値を反転します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この変更により、左から右へスクロールするアニメーションになります。
テキストをループで自然につなげる
通常のコードではテキストが消えた後に少し間（ギャップ）ができることがあります。これを防ぐため、同じテキストを2つ並べることでスムーズな無限ループを実現できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この方法を使うと、テキストがスムーズにつながったままループし続けます。
まとめ
CSSだけで文字の横スクロール無限ループを作る方法を紹介しました。
JavaScriptなしで実装できるため、軽量でパフォーマンスも良好です。
- keyframesアニメーションを使うことで、シンプルに実装できる
- CSSの調整で速度や方向を自由に変更可能
- ギャップをなくすには、2つのテキストを並べてループさせるのがコツ
サイトのバナーやニュースティッカーなど、さまざまな用途で活用できるので、ぜひ試してみてください！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
