【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）

【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）

スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。
CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQueryを使って実装してみました。

おしゃれなサイトでよく見かけますねー
おしゃれなサイト増えましたよねー

実装サンプル

See the Pen 【CSS + jQuery】Fixed background full sections (Responsive) by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

HTML

<main>
  <section>
    <div class="one">
      <div class="bg _01"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="">
        <p>1st</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _02"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="">
        <p>2nd</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _03"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="">
        <p>3rd</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _04"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="">
        <p>4th</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _05"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="">
        <p>5th</p>
      </div>
    </div>
  </section>
</main>

CSS

display: none;とdisplay: block;がポイントです。

section {
    display: flex;
}
.one {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
    z-index: -1;
}
.show .bg {
    display: block;
}
.bg._01 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto01.jpg");
}
.bg._02 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto02.jpg");
}
.bg._03 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto03.jpg");
}
.bg._04 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto04.jpg");
}
.bg._05 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto05.jpg");
}
.onebox {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
}
.onebox img {
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 15px;
}
.onebox p {
    text-align: center;
    margin: 0;
}

jQuery

コンテンツが50px見えたらクラスが付与します。

$(function(){
  $(".one").each(function(i, elem){
    var one = $(elem).offset().top;
    $(window).on("load scroll resize", function(){
      var two = $(window).height();
      var three = $(window).scrollTop();
      var showClass = "show";
      var timing = 50; // 50px, add to css
      if (three >= one - two + timing){
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  });
});
サンプルページはこちら

実装サンプル（フェードイン効果をつけてみる）

See the Pen 【CSS + jQuery】Fixed background full sections + fade-in (Responsive) by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

HTML

<main>
  <section>
    <div class="one">
      <div class="bg _01"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="">
        <p>1st</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _02"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="">
        <p>2nd</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _03"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="">
        <p>3rd</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _04"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="">
        <p>4th</p>
      </div>
    </div>
  </section>
  <section>
    <div class="one">
      <div class="bg _05"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="">
        <p>5th</p>
      </div>
    </div>
  </section>
</main>

CSS

transitionとopacityで効果をつけました。

section {
    display: flex;
}
.one {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.5s ease 0s;
    z-index: -1;
}
.show .bg {
    opacity: 1;
}
.bg._01 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto01.jpg");
}
.bg._02 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto02.jpg");
}
.bg._03 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto03.jpg");
}
.bg._04 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto04.jpg");
}
.bg._05 {
    background-image: url("https://125naroom.com/demo/img/itukanokotonokoto05.jpg");
}
.onebox {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
}
.onebox img {
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 15px;
}
.onebox p {
    text-align: center;
    margin: 0;
}

jQuery

コンテンツが50px見えたらクラスが付与します。

$(function(){
  $(".one").each(function(i, elem){
    var one = $(elem).offset().top;
    $(window).on("load scroll resize", function(){
      var two = $(window).height();
      var three = $(window).scrollTop();
      var showClass = "show";
      var timing = 50; // 50px, add to css
      if (three >= one - two + timing){
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  });
});
サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

ふわっと派ですー
おなか空きましたー

関連記事

【CSS】背景画像を固定したおしゃれなLP（ランディングページ）を作ってみよう
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2024.7.3

5

/

9

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインのこと - Web design gallery
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集

5

/

9

2025

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

5

/

14

2024

【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん

スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j

...
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん

デザインのメモ

7

/

3

2024

【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）

スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery

...
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）

デザインのメモ

5

/

15

2024

【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで

...
【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

デザインのメモ

Googleさんの
おすすめ

5

/

9

2025

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...
【jQuery】スライダープラグイン「slick」実装サンプル集

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

もっと見る

Googleさんの
おすすめ

5

/

9

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

であうにあう2025 Campaign | niko and . . .
ソラニン
  • 2025.05.03New
  • ソラニン
  • 控えめに言って最高じゃないかと思う。きっと10年前も同じこと思ったんだろうなと思う…
  • いつかのこと
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）