皆様こんにちは。
キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。
今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した
シンプルなパララックスページの作り方を、ご紹介したいと思います。
「パララックスってなに？」と思われる方もいらっしゃると思いますので、
まずは、その言葉の意味から解説したいと思います。
1. パララックスとは
パララックス(en. Parallax)とは、日本語で「視差」という意味です。
Webデザインの世界においては、「視差効果」とも呼ばれ、画面をスクロールするといった動作の際に
要素を異なる速度で動かしたりすることで、あたかも立体で奥行きがあるように見せる手法とのことです。
最近ではプラグインも増えつつあり、単に速度の変更だけでなく、様々な動きを持たせることが可能になってきました。
2. 実際に触ってみましょう
まずは、こちらのサンプルをご覧ください。
固定された背景の上を、コンテンツがスクロールします。
※「RunPen」を押すと、サンプルが表示されます。
また、サンプル右上の「EDIT ON CODEPEN」をクリックすることでより大きな表示でご覧頂けます。
サンプル１
See the Pen Parallax_01 by s-ta/w (@w_s-ta) on CodePen.
こちらが、上記サンプル１のソースコードになります。
サンプル１ ソースコード
CSS
/*画面全体の設定*/
body,
html {
height: 100%;
margin: 0 auto;
letter-spacing: 2px;
font-size: 10px;
}
/*固定する背景*/
div {
box-sizing: border-box;
color: #FFF;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5%;
}
.parallax-bg {
background-image: url('画像のURL');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/*スクロールするコンテンツ*/
.scrollbox {
background-color: #111;
}
HTML
<div class="parallax-bg">固定背景１</div> <div class="scrollbox">スクロールコンテンツ</div> <div class="parallax-bg">固定背景２</div>
要素.parallax-bgに対して、背景画像の固定・移動を指定する「background-attachment」
プロパティの値を「fixed」にすることで、スクロールされても背景画像が動かないようにします。
そして、スクロールを行うことで「height: 100%」要素の下に配置されていた「scrollbox」クラスが登ってきます。
最後に、「parallax-bg」クラスを再度配置しているので、
あたかも「scrollbox」クラスの部分のみが、画面の上を滑っていくように見えるという仕組みです。
背景となる「parallax-bg」クラスと、コンテンツの「scrollbox」クラスの順番を入れ替えることで、
コンテンツから先に表示させることも可能です。
サンプル２
See the Pen Parallax_02 by s-ta/w (@w_s-ta) on CodePen.
サンプル２ ソースコード
CSS(抜粋)
/*画面全体の設定*/
body,
html {
height: 100%;
margin: 0 auto;
letter-spacing: 2px;
font-size: 10px;
}
/*固定する背景*/
div {
box-sizing: border-box;
color: #FFF;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5%;
}
.parallax-bg {
background-image: url('画像のURL');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/*スクロールするコンテンツ*/
.scrollbox1 {
background-color: #111;
}
.scrollbox2 {
background-color: #222;
}
HTML(抜粋)
<div class="scrollbox1">スクロールコンテンツ１</div> <div class="parallax-bg">固定背景</div> <div class="scrollbox2">スクロールコンテンツ２</div>
3. 応用してみる
「parallax-bg」クラスと「scrollbox」クラスの組み合わせや数を変えることで、次のような見せ方も可能になります。
サンプル３
See the Pen Parallax_03 by s-ta/w (@w_s-ta) on CodePen.
「parallax-bg」クラスの「height」要素の値を、「height: 50%」のように小さくすることで
コンテンツ間に出現する背景の高さが狭まり、コンテンツ部をより強調して見せることもできます。
サンプル３ ソースコード
CSS(抜粋)
/*画面全体の設定*/
body,
html {
height: 100%;
margin: 0 auto;
letter-spacing: 2px;
font-size: 10px;
}
/*固定する背景*/
div {
box-sizing: border-box;
color: #FFF;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5%;
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 50%;
}
/*各背景の画像*/
.img-bg-01 {
background-image: url('画像のURL');
}
.img-bg-02 {
background-image: url('画像のURL');
}
.img-bg-03 {
background-image: url('画像のURL');
}
.img-bg-04 {
background-image: url('画像のURL');
}
.img-bg-05 {
background-image: url('画像のURL');
}
/*スクロールするコンテンツ*/
.scrollbox1 {
background-color: #111;
}
.scrollbox2 {
background-color: #222;
}
.scrollbox3 {
background-color: #333;
}
.scrollbox4 {
background-color: #444;
}
.scrollbox5 {
background-color: #555;
}
.scrollbox6 {
background-color: #666;
}
HTML(抜粋)
<div class="scrollbox1">スクロールコンテンツ１</div> <div class="parallax-bg img-bg-01">固定背景１</div> <div class="scrollbox2">スクロールコンテンツ２</div> <div class="parallax-bg img-bg-02">固定背景２</div> <div class="scrollbox3">スクロールコンテンツ３</div> <div class="parallax-bg img-bg-03">固定背景３</div> <div class="scrollbox4">スクロールコンテンツ４</div> <div class="parallax-bg img-bg-04">固定背景４</div> <div class="scrollbox5">スクロールコンテンツ５</div> <div class="parallax-bg img-bg-05">固定背景５</div> <div class="scrollbox6">スクロールコンテンツ６</div>
サンプル４
See the Pen Parallax_04 by s-ta/w (@w_s-ta) on CodePen.
こちらは、「parallax-bg」クラスのみを連続で配置することで、
スクロールすると背景画像が下から塗り替えられるような見せ方もできます。
サンプル４ ソースコード
CSS(抜粋)
/*画面全体の設定*/
body,
html {
height: 100%;
margin: 0 auto;
letter-spacing: 2px;
font-size: 10px;
}
/*固定する背景*/
div {
box-sizing: border-box;
color: #FFF;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5%;
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/*各背景の画像*/
.img-bg-01 {
background-image: url('画像のURL');
}
.img-bg-02 {
background-image: url('画像のURL');
}
.img-bg-03 {
background-image: url('画像のURL');
}
.img-bg-04 {
background-image: url('画像のURL');
}
.img-bg-05 {
background-image: url('画像のURL');
}
HTML(抜粋)
<div class="parallax-bg img-bg-01">固定背景１</div> <div class="parallax-bg img-bg-02">固定背景２</div> <div class="parallax-bg img-bg-03">固定背景３</div> <div class="parallax-bg img-bg-04">固定背景４</div> <div class="parallax-bg img-bg-05">固定背景５</div>
4. 最後に
今回は、HTMLとCSSのみで、シンプルなパララックスを表現してみました。
JavaScriptを使用していないので、JavaScriptが無効になっているブラウザでも
レイアウトの崩れも起こらず、問題なく表示することができます。
画面遷移の無い１画面のWebページですが、パララックス効果に見栄えが華やかになったのではないでしょうか。
お洒落なWebページをサクサクっと作りたいとき等に、参考にしていただければ幸いです。
ちなみに…
本サンプルで使用している画像は、全て私が個人的に撮影した写真になります。
サンプル３とサンプル４で使用した画像は、全てキャスレーコンサルティングが入っている
恵比寿ガーデンプレイスタワー３１階のオフィスやラウンジから見える景色です。
とっても綺麗な景色です！！
以上になります。
最後までお読みいただきありがとうございました。
