jQuery/Parallax をテンプレートにして作成

開始行:
*Parallax 奥行きのある視覚空間を演出 ~ パララクスとは「視差」のことで、ボックス領域のスクロール... ~ -公式サイト：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/ 　から最新のものを... 必要なファイルは、''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"... <section id="info"> <h1>info</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll"... <section id="about"> <h1>about</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll"... 　　： 以下同様、略 -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/ ~ ~

終了行:
*Parallax 奥行きのある視覚空間を演出 ~ パララクスとは「視差」のことで、ボックス領域のスクロール... ~ -公式サイト：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/ 　から最新のものを... 必要なファイルは、''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"... <section id="info"> <h1>info</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll"... <section id="about"> <h1>about</h1> <p>Dummy Text・・・</p> </section> <section class="parallax-window" data-parallax="scroll"... 　　： 以下同様、略 -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/ ~ ~

ページ名: