Parallax
奥行きのある視覚空間を演出
パララクスとは「視差」のことで、ボックス領域のスクロールスピードを調整することで、奥行きのある視覚空間を演出するものです。jQuery用のプラグインが多数ありますが、ここでは、parallax.min.js を使います。
- 公式サイト:http://pixelcog.github.io/parallax.js/
- DEMO:https://koichi-inoue.github.io/JQ_Parallax/
- CODE:https://github.com/koichi-inoue/JQ_Parallax
準備
- 1)ファイルセットのダウンロード
http://pixelcog.github.io/parallax.js/ から最新のものをDLして下さい。
必要なファイルは、parallax.min.js のみです。
- 2) 構成ファイルの確認
- index.html
- css
- style.css
- js
- jquery-xxxxx.min.js
- parallax.min.js
- images(背景画像を数個)
index.html
DEMOのHTMLから要点のみ抜粋したもの(書き方の例)です。
<script src="js/jquery-xxxxx.min.js"></script> <script src="js/parallax.min.js"></script>
<section class="parallax-window" data-parallax="scroll" data-image-src="images/image1.jpg"></section> <section id="info"> <h1>info</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll" data-image-src="images/image2.jpg"></section> <section id="about"> <h1>about</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll" data-image-src="images/image3.jpg"></section> : 以下同様、略
- HEADで、jQuery とプラグインの2つを読み込みます。
- 速度を変えたいボックス領域に class="parallax-window" を指定します。
- 同様に data-parallax="scroll" と書きます。
- 画像は、data-image-src="images/image01.jpg" などと書くことで、
背景画像として埋め込まれます。
style.css
DEMOのCSSから要点のみ抜粋したもの(書き方の例)です。
.parallax-window { min-height: 16rem; background: transparent; }
- ボックス領域の高さを16rem以上確保しています。
- 背景は透明であることが必要です。
その他、オプションの設定については、公式サイトでご確認下さい。