マウスやジャイロセンサーでパララックス効果をだすライブラリ「Parallax.js」

パララックスと言えば、スクロールした時にふわっと登場するイメージが強いと思います。実際、パララックスのライブラリはスクロール時に動きをつけるものが多いです。

このparallax.jsは他のライブラリと違い、スクロール時ではなく、マウスやジャイロセンサーに反応してパララックス(視差効果)をつけてくれるライブラリです。

 

こちらはサンプルです。こんな感じの動きが簡単に実装できます。

 

スポンサードサーチ



使い方

使い方はすごく簡単です。

①公式サイトダウンロード、またはCDNを使用して読み込みます。

parallax.jsー公式サイト

 

②次にパララックス効果をつける場所、土台を用意し、設定を行っていきます。

ここでは「id=scene」が場所になります。idではなくclassでもいいのですが、JavaScriptで指定するときに扱いやすいのでidの方がいいと思います。

id名は公式のドキュメントに沿ってsceneにしました。

 

③場所を用意したら、パララックス効果をつける要素を用意します。

「class=”layer”」に効果をつけます。以下のように「data-depth=XXXX」というデータ属性を追加します。

このデータ属性がつけることでパララックス効果が働きます。数値はマウスやジャイロセンサーにどのくらい反応するかを指定しています。

data-depthの数値が大きいほど、マウスなどの動きに敏感に反応するようになります。

下の例をみてみるとわかりやすいと思います。数値が大きくなるほど、比例して大きく動きます。

See the Pen
Parallax.js Sample
by laha (@laha)
on CodePen.

 

④場所と要素の用意をしたら、JavaScriptの記述をします。

 

これで設定は完了です。

パラメータもわかりやすく、コードも短いので簡単に実装できます。ぜひ試してみてください。

 

こちらはSVGアニメーションとパララックスを組み合わせてみました。

 

 

気づいた点

初期位置の調整をする時は、transform: translate3dを使用する

読み込み時、以下のスタイルは上書きされます。topやleftでの位置調整は効かなくなるので、「transform: translate3d」を使用します。

translate3d(X方向の距離, Y方向の距離, Z方向の距離)

X方向とY方向の指定で位置調整が可能になります。

 

position:relativeに上書きされる

要素の位置を指定しようとすると、全ての要素に「position:absolute」を設定していたはずなのに、一番上の要素だけrelativeに上書きされていました。

 

色々試しましたが設定で変えられるものではなく、そういう仕様のようなので細かく位置調整するような場合には例えば以下のように一枚噛ませておく必要があるかもしれません。