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 とプラグインの２つを読み込みます。
- 速度を変えたいボックス領域に class="parallax-window" を指定します。
- 同様に data-parallax="scroll" と書きます。
- 画像は、data-image-src="images/image01.jpg" などと書くことで、
背景画像として埋め込まれます。
style.css
DEMOのCSSから要点のみ抜粋したもの(書き方の例)です。
.parallax-window {
min-height: 16rem;
background: transparent;
}
- ボックス領域の高さを16rem以上確保しています。
- 背景は透明であることが必要です。
その他、オプションの設定については、公式サイトでご確認下さい。