LogoMark.png

jQuery/Parallax

Parallax

奥行きのある視覚空間を演出 DEMO

パララクスとは「視差」のことで、ボックス領域のスクロールスピードを調整することで、奥行きのある視覚空間を演出するものです。jQuery用のプラグインが多数ありますが、ここでは、parallax.min.js を使います。

準備

index.html

DEMOのHTMLから要点のみ抜粋したもの(書き方の例)です。

 <script src="jquery-xxxxx.min.js"></script>
 <script src="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>

  : 以下同様、略

style.css

DEMOのCSSから要点のみ抜粋したもの(書き方の例)です。

.parallax-window {
  min-height: 400px;
  background: transparent;
}

その他、オプションの設定については、公式サイトでご確認下さい。




PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 18:05:50