ふわっと慣性がついたスクロールを簡単に実現できる Luxy.js の使い方

Luxy.js

いわゆるエモいサイトでよく見かける、ページ全体をふわっとスクロールさせてパララックスなんかが付いている…というのを実現出来るプラグイン。
これひとつで慣性スクロールも、DOM要素のパララックス指定も出来るという優れものです。

用意するもの

コアファイルは公式サイトからダウンロードします。
npmも公開されているようです。

<script src="luxy.js"></script>

基本的な使い方
使い方も非常に簡単で、慣性スクロールを付与したいページ全体を指定のID（デフォルトは”luxy”）を付与したタグで囲んで、init()するだけです。
<div id="luxy">
 <!— メインコンテンツを囲む —->
</div>

luxy.init();

これだけであの「ふわっ」としたスクロールが実装されます。カクカク進むマウスホイールでも綺麗に動いてくれます。とても便利。
また、指定のclass（デフォルトでは”luxy-el”）をDOMに付与することでその要素にパララックス効果を与えることが出来ます。

付与出来る動きは、スクロールに合わせた縦移動と横移動の2種類です。
<div id="luxy">
<!— 縦移動の場合 —>
<div class="luxy-el" data-speed-y="5" data-offset="-150"></div>

<!— 横移動の場合 —>
<div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>

何も指定しないデフォルトでは縦移動のパララックス効果なので、横移動にする場合はdata-horizontal属性に1を設定することで変更します。

data-offsetは対象DOMの初期位置をずらせるプロパティですが縦方向にしか効きません。

なので横移動の初期位置は別の方法でずらすことになります。
オプション
オプションもシンプルで3種類しかありません。素敵。
luxy.init({
    wrapper: "#luxy",
    targets : ".luxy-el",
    wrapperSpeed:  0.08
});

「wrapper」で全体を囲むidを変更、「targets」でパララックス効果を付与するclassを変更、「wrapperSpeed」でスクロール速度を変更出来ます。
最後に注意することとしては、

transformの値変化とスクロールを同期する仕組みなので、内側にposition:fixed;などがあると上手くfixが動作しません。

なのでライトボックス系のプラグインとは相性が悪いので要注意です。
上述の仕組みさえ把握して作れば大抵のことは対処できる気がしますがその辺は都度対処ですね〜。
これを使って何かエモいサイト作りたいですね！


改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで