HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-2.css">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・・・表示位置を座標で指定（マイナスの値も利用可能）
-->
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>
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();
}