• 追加された行はこの色です。
• 削除された行はこの色です。
• jQuery/Parallax へ行く。

---

#author("2020-06-25T17:16:40+09:00","default:inoue.ko","inoue.ko")
*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以上確保しています。
-背景は透明であることが必要です。

その他、オプションの設定については、公式サイトでご確認下さい。
-http://pixelcog.github.io/parallax.js/

~
~