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

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

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

実装サンプル

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

コードはこちら

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>
きのこさん
パンおいしい
きのこさん
display: none;とdisplay: block;がポイントですー

CSS

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;
}
きのこさん
のどかわいたなー
きのこさん
コンテンツが50px見えたらクラスが付与しますー

jQuery

$(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

<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>
きのこさん
あ、こっちのほうがいいなー
きのこさん
transitionとopacityで効果をつけましたー

CSS

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;
}
きのこさん
ふわっとねー
きのこさん
コンテンツが50px見えたらクラスが付与しますー

jQuery

$(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(ランディングページ)を作ってみよう

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

gooone(ゴーン) | 三浦・三崎の観光情報マガジン
gooone(ゴーン) | 三浦・三崎の観光情報マガジン
僕と妹