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

初期化

ダウンロードしたファイルを読み込みm初期化のコードを挿入します。

<script src="/js/luxy.js" charset="utf-8"></script>
<script charset="utf-8">luxy.init();</script>

オプションを指定

オプションを指定する場合は以下のように読み込みます。

<pre><code class="language-markup"><div id="luxy">
<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-speed-x data-speed-y="5" 下に移動
data-speed-y="-5" 上に移動
スクロールした時の横軸の移動速度。
同時にdata-horizontal="1"を指定する必要あり。
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。