スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。
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>
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; }
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>
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; }
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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。