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

2024.7.3
更新 2026.10.28
デザインのメモ
jQuery

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

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

おしゃれなサイト増えましたよねー

実装サンプル

コードを見る（HTML・CSS・jQuery）

HTML

<div class="bg_area">
  <section class="bg_section">
    <div class="one">
      <div class="bg _01"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="" width="800" height="450">
        <p>1st</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _02"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide02.svg" alt="" width="800" height="450">
        <p>2nd</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _03"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="" width="800" height="450">
        <p>3rd</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _04"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide04.svg" alt="" width="800" height="450">
        <p>4th</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _05"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide05.svg" alt="" width="800" height="450">
        <p>5th</p>
      </div>
    </div>
  </section>
</div>

CSS

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

.bg_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/common/img/slide01.svg");
}
.bg._02 {
  background-image: url("https://125naroom.com/demo/common/img/slide02.svg");
}
.bg._03 {
  background-image: url("https://125naroom.com/demo/common/img/slide03.svg");
}
.bg._04 {
  background-image: url("https://125naroom.com/demo/common/img/slide04.svg");
}
.bg._05 {
  background-image: url("https://125naroom.com/demo/common/img/slide05.svg");
}
.onebox {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}
.onebox img {
  width: 100%;
  height: auto;
  vertical-align: top;
  margin-bottom: 15px;
}
.onebox p {
  text-align: center;
  margin: 0;
}

jQuery

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

$(function(){
  function check(){
    var two = $(window).height();
    var three = $(window).scrollTop();
    var showClass = "show";
    var timing = 50; // 50px, add to css
    $(".one").each(function(i, elem){
      var one = $(elem).offset().top;
      if (three >= one - two + timing){
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  }
  $(window).on("scroll resize", check);
  check(); // ページを開いたときにも 1 回たしかめる
});

見本ページをひらく（基本）

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

コードを見る（HTML・CSS・jQuery）

HTML

<div class="bg_area">
  <section class="bg_section">
    <div class="one">
      <div class="bg _01"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="" width="800" height="450">
        <p>1st</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _02"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide02.svg" alt="" width="800" height="450">
        <p>2nd</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _03"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="" width="800" height="450">
        <p>3rd</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _04"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide04.svg" alt="" width="800" height="450">
        <p>4th</p>
      </div>
    </div>
  </section>
  <section class="bg_section">
    <div class="one">
      <div class="bg _05"></div>
      <div class="onebox">
        <img src="https://125naroom.com/demo/common/img/slide05.svg" alt="" width="800" height="450">
        <p>5th</p>
      </div>
    </div>
  </section>
</div>

CSS

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

.bg_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: .5s;
  z-index: -1;
}
.show .bg {
  opacity: 1;
}
.bg._01 {
  background-image: url("https://125naroom.com/demo/common/img/slide01.svg");
}
.bg._02 {
  background-image: url("https://125naroom.com/demo/common/img/slide02.svg");
}
.bg._03 {
  background-image: url("https://125naroom.com/demo/common/img/slide03.svg");
}
.bg._04 {
  background-image: url("https://125naroom.com/demo/common/img/slide04.svg");
}
.bg._05 {
  background-image: url("https://125naroom.com/demo/common/img/slide05.svg");
}
.onebox {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}
.onebox img {
  width: 100%;
  height: auto;
  vertical-align: top;
  margin-bottom: 15px;
}
.onebox p {
  text-align: center;
  margin: 0;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .bg { transition: none; }
}

jQuery

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

$(function(){
  function check(){
    var two = $(window).height();
    var three = $(window).scrollTop();
    var showClass = "show";
    var timing = 50; // 50px, add to css
    $(".one").each(function(i, elem){
      var one = $(elem).offset().top;
      if (three >= one - two + timing){
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  }
  $(window).on("scroll resize", check);
  check(); // ページを開いたときにも 1 回たしかめる
});

見本ページをひらく（フェードイン効果をつけてみる）