ウェブサイトに動きを加えることで、訪問者の視線を引き付け、滞在時間の向上が期待できます。その中でも、CSSだけで背景画像を自動スクロールさせるテクニックは、軽量かつ実装が簡単なため、多くのサイトで活用されています。
本記事では、初心者でもすぐに使える背景画像の自動スクロールの方法を、SEO対策やパフォーマンス面も考慮しながら詳しく解説します。具体的なHTML・CSSのコード例、アニメーションの仕組み、レスポンシブ対応のポイントも紹介していきますので、ぜひ参考にしてください。
✅ 本記事のポイント
✔ CSSアニメーションを使って背景画像を自動スクロールする方法
✔ JavaScript不要！軽量かつシンプルな実装でパフォーマンス向上
✔ レスポンシブ対応でスマホでも最適な動きを実現
✔ SEO対策も考慮し、検索エンジンからの評価をアップ
1. 背景画像を自動スクロールさせるメリット
背景画像をアニメーションさせることで、以下のような効果が得られます。
🔹 サイトのビジュアルを向上
背景に動きを加えることで、視覚的なインパクトを強め、デザインの印象を向上させます。
🔹 ユーザーの滞在時間を増やす
アニメーションはユーザーの注意を引きつけ、滞在時間の延長につながります。
🔹 JavaScript不要で軽量
CSSの@keyframesを使うため、JavaScriptを使用せず、パフォーマンスを損なわないのがメリットです。
2. 背景画像の自動スクロールを実装する方法
以下のコードを使えば、簡単に背景画像を横方向にループスクロールさせることができます。
<section class="scrolling-background">
<div class="scrolling-background__inner"></div>
</section>/* キーフレームアニメーションの定義 */
@keyframes scrollBackground {
from {
background-position: 0 0;
}
to {
background-position: -100% 0;
}
}
/* 背景画像を持つコンテナ */
.scrolling-background {
width: 100%;
height: 600px; /* デザインに合わせて調整 */
overflow: hidden;
position: relative;
}
/* 背景アニメーションを適用 */
.scrolling-background__inner {
width: 200%;
height: 100%;
background: url("../img/bg_scrolling.jpg") repeat-x center;
background-size: auto 100%;
animation: scrollBackground 50s linear infinite;
position: absolute;
top: 0;
left: 0;
}
/* スマホ対応 */
@media (max-width: 768px) {
.scrolling-background {
height: 450px;
}
.scrolling-background__inner {
background-size: auto 450px;
animation: scrollBackground 100s linear infinite;
}
}3. コード解説｜CSSアニメーションの仕組み
ポイント1：キーフレームアニメーション
@keyframes scrollBackground {
from {
background-position: 0 0;
}
to {
background-position: -100% 0;
}
}ポイント2：背景画像のサイズ設定
.scrolling-background__inner {
width: 200%;
height: 100%;
background: url("../img/bg_scrolling.jpg") repeat-x center;
background-size: auto 100%;
}width: 200%とすることで、背景画像がリピートされながら途切れずに表示されるようになります。
ポイント3：レスポンシブ対応
@media (max-width: 768px) {
.scrolling-background {
height: 450px;
}
.scrolling-background__inner {
background-size: auto 450px;
animation: scrollBackground 100s linear infinite;
}
}4.まとめ｜CSSで簡単に背景を動かそう！
本記事では、CSSだけで背景画像を自動スクロールさせる方法について解説しました。
JavaScriptを使わずに軽量で実装できるため、パフォーマンスを重視するサイトに最適です。
💡 最後にポイントをおさらい
✔ @keyframes を使い、CSSだけで背景スクロールを実現
✔ background-sizeとwidth: 200%で背景をシームレスに表示
✔ @media を使ってスマホでも最適な表示を実装
✔ SEO対策として、画像の最適化やキーワード配置を意識