【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）
- 2019.12.18
- 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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
ふわっと派ですー
おなか空きましたー
関連記事
おすすめ
かんれん
- web / 2021.1.5
- 【CSS】ul、olの改行位置を揃える（リセットCSSを使用している場合）
- web / 2019.5.30
- 【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）
- web / 2019.12.19
- 【CSS】背景画像を固定したおしゃれなLP（ランディングページ）を作ってみよう
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ（Windows or Mac）
- クロームでF5（更新）ってどうするんでしたっけ？ あー、Macですか？わかるわかる、な…
- 125naroom / デザインするところ（会社）です。