Parallax(パララックス)とは日本語では視差のことで、ウェブデザインでは一般的には画面のスクロールに応じてコンテンツ間またはコンテンツと背景のスピードを変えたり移動させたりすることを指します。
今回のパララックスはスクロールすると全画面背景が切り替わるというものです。
cssだけで手軽に実現できるのでぜひ試してみてください。
また、前回stickyで背景を固定する方法を記事にしたのでこちらもあわせてご覧ください。
デモ
2つほど表現を変えたデモを用意しました。
まずはデモをご確認ください。
スクロールで全画面背景を切り替える基本的な実装
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;
となります。
コンテンツ間の全画面背景を切り替える
上記の応用ですがコンテンツの間に配置した全画面背景を切り換える際の記述例です。
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 ;
}
上述した基本実装の全画面背景画像の間にコンテンツを挟むだけで実現可能です！
ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
個人サイトやTwitter、YouTubeにてPhotoshopとIllustratorの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 Adobe Illustrator iPad版 xコネクリ – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『フォトショ 魔法のデザイン』（ソーテック社／共著）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。
