こんにちは、中の人です。
今回は実務でもよく使っているLuxy.jsをご紹介します。
Luxy.jsはヌルッとスクロールできる慣性スクロールやパララックス効果を簡単に実装できるプラグインです。
もくじIndex
インストール
npmでインストールする場合はこちら
npm install luxy.js --save
該当ファイルがある階層を指定しても動きますよ
コアファイルはこちらよりダウンロード可能です。
使い方
初期化
プロジェクトにLuxy.jsを含めたら、まずは初期化しましょう。
慣性スクロールを適用する
下記のように、”#luxy”で囲んだコンテンツに慣性スクロールが適用されます。
ここにLuxyを適用したいコンテンツ
…以上です。簡単ですね。
1点だけ注意しなければいけないのが、ヘッダーやフローティング要素などの”position: fixed;”または”position: sticky;”等で位置を固定している要素にLuxyを適用しても正常に位置固定されません。
その場合は、下記のように部分的にLuxyを適用するようにしましょう。
Luxyを適用したくないコンテンツ
Luxyを適用したいコンテンツ
パララックス効果を適用する
下記のように”.luxy-el”クラスを付与した要素にパララックス効果が適用されます。
パララックスの速度やオフセットの指定方法は下記の通り。
- data-speed-y : Y軸方向のパララックスの速度を指定
- data-offset : 基準点からのオフセットを指定
水平方向のスクロールにも対応しています。
- data-horizontal : 垂直方向または水平方向の指定(水平スクロールの場合は”1″を指定)
- data-speed-x : X軸方向のパララックスの速度を指定
オプション
| オプション名 | デフォルト値 | 説明 |
|---|---|---|
| wrapper | ‘#luxy’ | 慣性スクロールのラッパー要素 |
| targets | ‘.luxy-el’ | パララックス効果の対象要素 |
| wrapperSpeed | 0.08 | 慣性スクロースの速度 |
それぞれのオプションの指定方法は下記の通り。
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.08
});
