どうも、Webデザイナーのレーウィンです。
今回はluxy.jsの使い方及び注意点について。
luxy.jsとは
↓公式サイトはこちら
https://min30327.github.io/luxy.js/
公式サイト自体がサンプルになっており、滑らかな慣性スクロールをPCで実装しつつ、
画像の付いてくるスピードをスクロールよりも遅くしたり早くしたりすることができます。
ダウンロードは最初に見える「View on GitHub」のボタンをクリックし、
ファイル等が並んでいるリスト右上にある緑色の「Code」ボタンクリック。
「Download ZIP」をクリックすることで一式をダウンロードすることができます。
dist内にある「luxy.min.js」もしくは「luxy.js」を使います。
使い方
①「luxy.min.js」の読み込む。
scriptタグを使用して読み込みます。headタグ内ではなく、/bodyの上。
例：
<script src="js/luxy.min.js" charset="utf-8"></script>
②luxyを動かすjsを書く
luxy.init();
luxy.min.jsを読み込んだ後に上記をjsに書きます。
<script src="js/luxy.min.js" charset="utf-8"></script> <script src="js/scripts.js" charset="utf-8"></script> <!--ここの中に書く-->
もしくは直接書いて
<script src="js/luxy.min.js" charset="utf-8"></script>
<script charset="utf-8">
luxy.init();
</script>
こうですね。
③慣性スクロールするコンテンツを囲む
<div id="luxy"> ここにコンテンツを入れる </div>
滑らかに動かしたいもの全てをdivで囲み、#luxyを付けます。
idなので、２つ以上同じページに置くのはNG。
２つ以上置きたい場合はオプションを使いつつ設置するといいかも（試してはいない）。
これで慣性スクロールは実装できているはずなので、確認をしてみましょう。
④パララックスしたい要素に色々つける
<div id="luxy"> <div class="luxy-el" data-speed-y="5" data-offset="-50"></div> </div>
#luxy内でパララックスを実装する要素にクラス.luxy-elを付与します。
また、data-speed-y及びdata-offsetで調整をします。
data-speed-yはスピード、data-offsetは位置調整に使います。
もし水平方向での動きをしたい場合は
<div id="luxy">
<div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>
こう。data-horizontalで1を指定すると水平方向になる。data-speed-xはスピード。
これで完了！
補足１：スマホ及びレスポンシブについて
スマホ及びタブレットでluxy.jsを読み込んでいると、スマホの慣性スクロール＋luxy.jsの慣性スクロールが２重で働き、気持ち悪い操作感になります。
なので、スマホ・タブレットの時はluxy.jsが起動しないようにすることを強く勧めます。
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
// スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
// タブレット向けの記述
} else {
// PC向けの記述
luxy.init();
}
参考：https://arts-factory.net/user_agent/
デバイス判定でluxy.jsを実行するかどうか分岐させちゃいましょう。
luxy.jsを読み込まない場合に、組み方次第で一部崩れが発生する場合があります。
その場合はそれぞれのデバイスのところでクラスを付与したり直接プロパティを書いたりして対処して下さい。
補足２：オプションについて
めっちゃ簡単なものですが、オプションを設定できます。
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.08
});
wrapperは囲むidを指定。
targetsはパララックスする要素のクラス名。
wrapperSpeedは滑らかさの速度。
正直デフォルトでいいと思います。
注意点
リロード時必ずページの一番上になる
luxy.jsを使用しているページは、リロードした時に必ずページの一番上からスタートします。
一応、performance.navigation.typeを使用しつつ、スクロールする度に数値をcookieに保存しておく等すればある程度なんとかなりそうな気はしますが、
結構な負荷がかかりそうなので、正直「超」非推奨です。
（慣性スクロールを簡単に実装するjsは他にもありますが、基本同じ形で実装しているのでどうしても負荷無く慣性スクロールを実装したい場合は独自jsで実装した方が早いと思います）
固定している要素は#luxyの外に置く
header等でposition: fixedを指定している要素はid=”luxy”のdivの外に置いて下さい。
<header>固定ヘッダーなので外に置く</header> <div id="luxy"> ここにコンテンツを入れる </div>
他のスクロール系との組み合わせに注意が必要
スクロール系全般に言えることですが、
組み合わせは気を付けないと変なバグが発生します。
これを実装する場合は他に大きなスクロール系ライブラリ・プラグインは入れないことを推奨します。
離脱率が上がる可能性がある
これは慣性スクロール全般に言えることですが、
リッチに見える半面、ユーザーのストレスになる場合があります。
特に、情報・イベント系のサイトだと
ユーザー「イベント何日だっけ？チケットいくらだっけ？」
ブラウザ「滑らかリッチスクロールやで（にっこり）」
ユーザー「うぜええええええええ（マウスホイールぐるぐる）」
ってなるので実装は非推奨です。こうなると離脱率に繋がってしまうので、気を付けましょう。
高級感あるサイトは慣性スクロールとの相性が良いですが、
例えば高級ホテルの場合は部屋紹介などには実装しながらも、予約ページ・マイページには実装しない方がいいですね。
以上！luxy.jsでした。
簡単に実装できる半面、細かい設定は出来無いのでカスタマイズ性は高くありません。
また、慣性スクロールは実装した側が満足するだけのものにもなる場合も多いので、
用法・容量を守って正しく使いましょう！
ではでは～。