「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

JavaScript

ライブラリ

こんにちは、中の人です。
今回は実務でもよく使っているLuxy.jsをご紹介します。

Luxy.jsはヌルッとスクロールできる慣性スクロールやパララックス効果を簡単に実装できるプラグインです。

インストール

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
});

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR