【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（ランディングページ）を作ってみよう

Author

デザコト

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

2019.12.18

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

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

カテゴリー

人気記事

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

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

1

/

5

2022

【jQuery】下に固定要素を置くのでフッターの下を自動でズラす

ページの下に申し込みボタンをずっと表示させたいのですがフッターが隠れちゃうのですよねー、どうにかなりませんかねー？ 自動でフッターの下をズラしちゃいましょうー さっそく実装してみる See the Pen 【jQuery

...
【jQuery】下に固定要素を置くのでフッターの下を自動でズラす

デザインのメモ

4

/

4

2024

【jQuery】 ローディング、実装サンプル集

ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー

...
【jQuery】 ローディング、実装サンプル集

デザインのメモ

7

/

27

2021

【jQuery】プラグインを使わずにモーダルを作ってみる

プラグインを使わずにモーダルってできますか？ ふむふむ、やってみましょうー プラグインを使わないモーダルのサンプル スマホでも問題ない。IEでも問題ない。完成ですー。 See the Pen 【jQuery】プラグインを

...
【jQuery】プラグインを使わずにモーダルを作ってみる

デザインのメモ

Googleさんの
おすすめ

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

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

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

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

デザインのメモ

2024.2.2

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

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

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

デザインのメモ

2019.9.27

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

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

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

デザインのメモ

もっと見る

Googleさんの
おすすめ

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

メリット
  • 2024.04.19New
  • メリット
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集