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】背景（background）を2色にする

みる

【CSS】プラスとマイナスをつくる

みる

【CSS】tableをレスポンシブ対応する、2列を1列に切り替える

みる

Googleさんのおすすめ

人気記事

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

みる

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

みる

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

みる

more

Googleさんのおすすめ

デザインの記事

JANAI COFFEE
  • 2023.03.24New
  • JANAI COFFEE
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
ちょっと思い出しただけ
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる