125naroom / デザインするところ（会社）です。

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

【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
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【CSS】シンプルなボタンデザイン実装サンプル集
【CSS】シンプルなボタンデザイン実装サンプル集

おすすめ

かんれん

【CSS】animationを使って流れるテキストとかを作ってみる

みる

【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する

みる

【CSS】見出しデザインをまとめてみる（左右に線を引くとか）

みる

Googleさんのおすすめ

人気記事

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

みる

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

みる

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

みる

more

Googleさんのおすすめ

デザインの記事

信州アップルパイ研究所_Q
ちょっと思い出しただけ
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える