スクロールでの全画面背景の切り替えパララックスをcssだけで実現!

Parallax(パララックス)とは日本語では視差のことで、ウェブデザインでは一般的には画面のスクロールに応じてコンテンツ間またはコンテンツと背景のスピードを変えたり移動させたりすることを指します。

今回のパララックスはスクロールすると全画面背景が切り替わるというものです。

cssだけで手軽に実現できるのでぜひ試してみてください。

また、前回stickyで背景を固定する方法を記事にしたのでこちらもあわせてご覧ください。

デモ

2つほど表現を変えたデモを用意しました。
まずはデモをご確認ください。

DEMO1

DEMO2

スクロールで全画面背景を切り替える基本的な実装

html

<div class="img a"></div>
<div class="img b"></div>
<div class="img c"></div>

css

.img {
	width: 100% ;
	height: 100vh ;
	background: url("assets/img/img-4.jpg") no-repeat center center / cover;
	background-attachment: fixed ;
}
.img.b {
	background-image: url("assets/img/img-5.jpg");
}
.img.c {
	background-image: url("assets/img/img-6.jpg");
}

ポイントは以下の通りです。

  • widthを100%, heightを100vhにすることで全画面領域を確保
  • background-attachmentをfixedにすることで背景画像を固定

たったこれだけです!

background-attachmentは背景画像を固定するか要素と一緒にスクロールするかを設定するプロパティです。
上記のbackgroundをショートハンドで書く場合は、

background: url("assets/img/img-4.jpg") no-repeat center center / cover fixed;

となります。

DEMO1

コンテンツ間の全画面背景を切り替える

上記の応用ですがコンテンツの間に配置した全画面背景を切り換える際の記述例です。

html

<div class="img a"></div>
<div class="contents a">コンテンツ領域</div>
<div class="img b"></div>
<div class="contents b">コンテンツ領域</div>
<div class="img c"></div>
<div class="contents c">コンテンツ領域</div>

css

.img, .contents {
	width: 100% ;
	height: 100vh ;
}
.img {
	background: url("assets/img/img-4.jpg") no-repeat center center / cover;
	background-attachment: fixed ;
}
.img.b {
	background-image: url("assets/img/img-5.jpg");
}
.img.c {
	background-image: url("assets/img/img-6.jpg");
}
.contents {
	color: #fff ;
	background: #01579B ;
	display: flex ;
	justify-content: center ;
	align-items: center ;
}
.contents.b {
	background: #FF9100 ;
}
.contents.c {
	background: #AD1457 ;
}

上述した基本実装の全画面背景画像の間にコンテンツを挟むだけで実現可能です!

DEMO2

FOLLOW US SNSで最新情報をチェック!

KEYWORD 話題のキーワード!

PREVIOUS POST position: sticky ;の5つの便利な使い方と動かないときの確認事項
NEXT POST cssのmix-blend-modeをどこよりも詳しく徹底解説!良い感じの実装例もご紹介!
PAGE TOP