JavaScript
javascript
2020/05/11
「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる
こんにちは、中の人です。 今回は実務でもよく使っているLuxy.jsをご紹介します。 Luxy.jsはヌルッとスクロールできる慣性スクロールやパララックス効果を簡単に実装できるプラグインです。 DEMOはこちら もくじIndex インストール 使い方 慣性スクロールを適用する パララックス効果を適用する オプション インストール npmでインストールする場合はこちら npm install luxy.js --save 該当ファイルがある階層を指定しても動きますよ コアファイルはこちらよりダウンロード可能です。 使い方 初期化 プロジェクトにLuxy.jsを含めたら、まずは初期化しましょう。 luxy.init(); 慣性スクロールを適用する 下記のように、"#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 });
