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