【jQuery】背景も前景もパララックスできるEnllax.jsの導入方法

要素も背景もパララックスができる、Enllax.jsの導入方法をご紹介します。個人的に、公式の風船アイコンが可愛くて好きです。

導入手順

DEMO＆ダウンロード先

enllax.js

Enllax isは、背景にもパララックス効果を付与できるプラグインですが、
今回ご紹介するのは全景、HTML要素にそもまま適用させたケースのみになります。

• github
• .zip
• .gz

好きな方法でダウンロードをお願いします。

ダウンロードしたフォルダに入っている下記のいずれかのファイルを、ご利用の環境にアップロードしてください。
「jquery.enllax.min.js」or「jquery.enllax.js」
上でアップロードしたファイルを、jQueryの後に呼び出します。

記述するコード

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.enllax.min.js"></script>
<script>
$(function(){
   $(window).enllax({type: 'foreground'});
};)
</script>

windowに対して「enllax({type: ‘foreground’})」のみ。簡単ですね。

ちなみにこの設定は「HTML要素をパララックスさせる場合」で、背景にパララックス効果を付与して動かしたい場合には、「{type: ‘foreground’}」に変更です。

僕の場合は、backgroundに適用させるケースが少ない（というかEnllaxのbackgroundのパララックスはカクつくことがあるので使いたくない）ので、windowに「{type: ‘foreground’}」を掛けて細かな値やdirectionだけ個々指定しています。公式がそもで背景カクついてますもんね。

あとは、HTMLを下記のようにマークアップして完了。

<!--
 data-enllax-ratio : 移動速度 大きい方が早い
 data-enllax-direction : 移動方向 「horizontal = 水平方向」「vertical = 垂直方向」
 -->
<div data-enllax-ratio="0.1" data-enllax-direction="horizontal">enllax</div>
<div data-enllax-ratio="-0.5" data-enllax-direction="vertical">enllax</div>

サンプルとして作ったのはこちら。

[jQuery]背景も前景もパララックスできるEnllax.js horizontal

See the Pen [jQuery]背景も前景もパララックスできるEnllax.js horizontal by nkmrkisk (@rekid) on CodePen.

[jQuery]背景も前景もパララックスできるEnllax.js vertical

See the Pen [jQuery]背景も前景もパララックスできるEnllax.js vertical by nkmrkisk (@rekid) on CodePen.

どうもverticalは処理範囲が広いせいか、重くなりやすいみたいです。

ちょっと癖？がある点について

僕の設定が悪いのかわからないのですが、
下記のような書き方をしても、HTMLのマークアップで「data-enllax-ratio」を指定してあげないとうまく動作しなかったりするんですよね。。。

$('#selecter').enllax({
type: 'foreground', 
ratio: 0.5,
direction: 'horizontal'
});

カクつかない範囲で使えれば、挙動はきれいなんですけどね。
技術不足な気がするわー。。。