jQuery/Vanilla Javascript

縦横斜めに動く簡単パララックスLuxy.js

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はVanilla JavascriptのパララックスプラグインLuxy.jsをご紹介します。

普通パララックス効果って縦か横のイメージでしたが簡単なタグの属性設定で斜めにも動けることが発覚しました!

設定はjqueryに依存しないうえに3行コピペでOKのシンプルさです。

公式サイト: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>

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-horizo​​ntal = “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 -->

data-horizontal=”1″ data-speed-y=”6″の組み合わせでデモ冒頭のようなflexで整列させたテキストが広がるアニメーションのような表現も可能です。

サンプル

uhaha

最近のパララックス設定はほんとに簡単になりました。いろんな組み合わせでさまざまなアニメーションが作成できそうですね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*