動くWebデザイン
アイディア帳

動きを実現する仕組み

Luxy.jsというライブラリを使い、各要素に動きを指定してスクロールをすると画像やエリアが時間差で重なるように設定する。
重なりのあるレイアウトに使用すると浮遊感のあるリッチな印象のサイトになる。

[使用するライブラリ]
Luxy.js（https://min30327.github.io/luxy.js/）

HTMLの書き方

1. head終了タグ直前に自作のCSSを読み込みます。

   <link rel="stylesheet" type="text/css" href="css/6-2.css">
   </head>

2. body内にHTMLを記載します。

   <div id="luxy"><!--時間差で重ねるエリア全体に id="luxy"と指定-->
   
   <section class="area">
   
   <!--動かしたい要素のclassにluxy-elと指定-->
   <figure class="luxy-el" data-speed-y="8" data-offset="50"><img src="pict.jpg" alt=""></figure>
   <div class="box luxy-el" data-horizontal="1" data-speed-x="-5">
   <h2>Area1</h2>
   <p>テキストが入ります。</p>
   </div>
   
   </section>
   
   </div><!--/luxy-->
   
   <!--動きの指定のクラス名
   data-speed-y・・・縦方向のパララックス効果の速度を数字で指定（マイナスの値も利用可能）
   data-horizontal・・・水平方向に移動する場合に指定
   data-speed-x・・・水平方向の速度（マイナスの値も利用可能）
   data-offset・・・表示位置を座標で指定（マイナスの値も利用可能）
   -->

3. body 終了タグ直前に Luxy.js（https://github.com/min30327/luxy.jsからダウンロード）と、動きを制御する自作のJS の2 つを読み込みます。

   <script src="js/luxy.js"></script>
   <!--自作のJS-->
   <script src="js/6-2.js"></script>
   </body>

自作のCSS内の書き方

CSSを設定しなくても動きます。

【Footerを下付きにしたい場合】
絶対配置で下部配置し、z-indexの値を大きな数字にしてエリアの重なりの最前面に出してください。

footer{
position:absolute;
width:100%;
z-index: 999;
}

自作のJS内の書き方

luxy.init();

【横幅が768px以上の場合のみ、時間差で重なる動きを実現したい場合】
JavaScriptファイル内で、768px以上の時に時間差で重なる動きを実行するように指定します。
※ウィンドウズサイズを狭めて検証したい場合は、ページの再読み込みが必要

if(matchMedia('(min-width: 768px)').matches){
luxy.init();
}