Javascript

【Javascript】パララックスエフェクトプラグインluxy.js

June 16, 2018
luxy

luxy.jsはVanilla.jsの慣性スクロールとパララックスエフェクトプラグイン。

Installation

ページにスクリプトを含める

<script src="path/to/luxy.js" charset="utf-8"></script>

luxy.jsを含めて初期化

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

Usage

ラッパーオプションで指定された要素でコンテンツ全体をラップします。固定要素は除外してください。

<div id="luxy">
    ... Entire content
</div>

パララックスエフェクトを指定する要素に.luxy-elを追加

<div id="luxy">
    <div class="luxy-el"></div>
</div>

速度をdata-speed-y属性で指定、オフセットをdata-offset属性で指定

<div id="luxy">
    <div class="luxy-el" data-speed-y="5" data-offset="-50"></div>
</div>

水平方向に移動する場合は、data-horizo​​ntal = "1"を指定し、data-speed-x属性を使用して水平方向の速度を指定

<div id="luxy">
    <div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>

Options

  1. wrapper
  2. targets
  3. wrapperSpeed