Javascript 「Luxy.js」で慣性スクロールとパララックスを実装する
「Luxy.js」は慣性スクロールとパララックスを簡単に実現してくれるJavascriptのプラグインです。
慣性スクロールはスクロール時にフワッとする動きをもたせる機能で、パララックスはスクロール時に要素をアニメーションのようにずらして動かくことが可能。複雑なコードは必要とせず簡単に実装出来る上、ファイルも4KBと軽量で優秀なプラグインです。
デモ
See the Pen
luxy.js by kura (@kuranopen)
on CodePen.
ダウンロード
Githubのページからダウンロードします。
javascriptファイルだけダウンロードする場合は緑色のボタン「Code」→「Download ZIP」をクリックします。
npmから読み込む場合
npm install luxy.js --save
初期化
ダウンロードしたファイルを読み込みｍ初期化のコードを挿入します。
<script src="/js/luxy.js" charset="utf-8"></script>
<script charset="utf-8">luxy.init();</script>
オプションを指定
オプションを指定する場合は以下のように読み込みます。
<script>
luxy.init({
wrapper: '#luxy', //慣性スクロールを包括する要素のID
targets : '.luxy-el', //パララックスの要素のclass名
wrapperSpeed: 0.08 //スクロールスピード
});
</script>
使い方
1. 慣性スクロールを実装する
ページ全体を包括する要素にid="luxy"を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>luxy.js</title>
</head>
<body>
<div id="luxy">
... Entire content
</div>
</body>
</html>
2. パララックスを実装する
初期化はパララックスを適用する要素にluxy-elを指定し、動きはdata-speed-yなどの属性で指定します。
<div id="luxy">
<div class="luxy-el" data-speed-y="10"><img src="test.jpg"></div>
</div>
縦or下に移動
data-speed-yを指定します。
<div id="luxy">
<div class="luxy-el" data-speed-y="10"><img src="test.jpg"></div><!-- 下に移動 -->
<div class="luxy-el" data-speed-y="-10"><img src="test.jpg"></div><!-- 上に移動 -->
</div>
左or右に移動
水平移動にするためにdata-horizontal="1"を指定し、data-speed-xで動きを調整します。
<div id="luxy">
<div class="luxy-el" data-horizontal="1" data-speed-x="10"><img src="test.jpg"></div><!-- 右に移動 -->
<div class="luxy-el" data-horizontal="1" data-speed-x="-10"><img src="test.jpg"></div><!-- 左に移動 -->
</div>
オプション
| data-offset |
data-offset="50"data-offset="-50"
|
ページ読み込み時の初期値を変更する属性 |
|---|---|---|
| data-speed-x |
data-speed-x="5" 右に移動data-speed-x="-5" 左に移動
|
スクロールした時の横軸の移動速度。 同時に data-horizontal="1"を指定する必要あり。 |
| data-speed-y |
data-speed-y="5" 下に移動data-speed-y="-5" 上に移動
|
スクロールした時の横軸の移動速度。 |
補足
スマホでは実行しないようにする
スマホの慣性スクロールが影響してパソコンと同じ動作が望めないため、スマホでは実行を指定させます。
Luxy.jsサイトでユーザーエージェントで識別する方法が紹介されていますが、ここではブラウザのサイズで識別する方法を紹介します。
Javscript
var width = $(window).width();
if(width > 767){
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.08
});
}
ページ内リンクを効くようにする
Luxy.jsのwrapper指定した要素にposition : fixedが掛かるため、その中の要素にページ内リンク（アンカーリンク）が効かなくなります。
こちらのサイトに要素の位置を使った解決方法が紹介されています。
