超簡単！html要素、背景画像どちらにもパララックス効果を適用できるプラグインEnllax.jsの使い方

パララックスを実装する際に、html要素、背景画像などシチュエーションによってどちらにも指定したい場合があるかと思います。
そんな時は、html要素、背景画像どちらでも超簡単にパララックスを実装できるEnllax.jsというプラグインがあるので、その使い方をご紹介したいと思います。

Enllax.jsをダウンロード

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.enllax.min.js"></script>

1 2	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/jquery.enllax.min.js"></script>

<script>
  $(window).enllax({type: 'foreground'});
</script>

$(window).enllax({type: 'foreground'});

</script>

type: ‘foreground’を指定します。
foregroundは、「前景」という意味です。

<script>
  $(window).enllax({type: 'background'});
</script>

$(window).enllax({type: 'background'});

</script>

type: ‘background’を指定します。
backgroundは、馴染みがあるかと思いますが「背景」という意味です。

data-enllax-direction=”vertical”を指定します。
verticalは、「垂直」という意味です。

data-enllax-ratio をプラスの値にします。
例）data-enllax-ratio=”0.7″

data-enllax-ratio をマイナスの値にします。
例）data-enllax-ratio=”-0.7″

data-enllax-direction=”horizontal”を指定します。
horizontalは、
「水平」という意味です。

data-enllax-ratio をプラスの値にします。
例）data-enllax-ratio=”0.2″

data-enllax-ratio をマイナスの値にします。
例）data-enllax-ratio=”-0.2″

ちなみに、data-enllax-ratio の値は、大きくなる程、移動速度が早くなります。
これでEnllax.jsの基本的な実装ができるかと思います。
めちゃめちゃ簡単ですね！

2017年6月19日カテゴリー：パララックス