縦横斜めに動く簡単パララックスLuxy.js
今回はVanilla JavascriptのパララックスプラグインLuxy.jsをご紹介します。
普通パララックス効果って縦か横のイメージでしたが簡単なタグの属性設定で斜めにも動けることが発覚しました！
設定はjqueryに依存しないうえに3行コピペでOKのシンプルさです。
Luxy.jsの基本的な設定
公式サイト：Luxy.js
GitHubより「Code」ボタンから「DownloadZip」を選択します。
luxy.js-master¥dist¥jsフォルダにあるluxy.jsを使用します。
読み込み
以下のように読み込み設定をします。
パララックスしたい範囲をid luxyで指定し、実際にパララックスアニメーションで動かしたい要素にクラスluxy-elを付与します。
wrapperSpeedは慣性スクロールの速度です。「1」を基準に数値が少ないほど遅延効果が大きくなります。個人的には使いにくいので地味に0.9に設定しました。
<script src="js/luxy.js"></script>
<script>
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.9
});
</script>HTMLの記述
luxyの中にパララックス要素としてluxy-elを設定するのみです。
<div id="luxy"><!-- ←パララックス範囲 -->
<div class="luxy-el"><!-- ←パララックスしたい要素 -->
<h1 class="center">TEXT</h1>
</div>
</div><!-- //luxy -->パララックス効果の速度や方向の設定
視差効果の速度の設定
タグの属性にdata-speed-yを設定します。
後述する横方向のアニメーション時には data-speed-xを設定します。
<div class="luxy-el" data-speed-y="6">
<div class="inner">
<h1 class="center">SPEED-6</h1>
</div>
</div><!-- //luxy-el -->水平方向に移動
水平方向に移動する場合は、data-horizontal = "1"を設定し、data-speed-xを使用して水平方向の速度を指定します。
<div class="luxy-el" data-horizontal="1" data-speed-y="6" data-speed-x="6">
<h1 class="center">horizontal-斜め</h1>
</div><!-- //luxy-el -->オフセット設定
data-offset属性でオフセットを指定します。
<div class="luxy-el" data-speed-y="2" data-offset="-100">
<h1 class="center">data-offset</h1>
</div><!-- //luxy-el -->ななめに動かす
data-horizontal="1"、data-speed-y="6"、data-speed-x="6"の3つの属性を設定することで斜めにも移動することができます。
<div class="luxy-el" data-horizontal="1" data-speed-y="6" data-speed-x="6">
<h1 class="center">horizontal-斜め</h1>
</div><!-- //luxy-el -->Luxyサンプル
data-horizontal="1" data-speed-y="6"の組み合わせでデモ冒頭のようなflexで整列させたテキストが広がるアニメーションのような表現も可能です。
See the Pen Luxy.js demo by uhaha (@uhaha) on CodePen.
最近のパララックス設定はほんとに簡単になりました。いろんな組み合わせでさまざまなアニメーションが作成できそうですね。
