simpleParallax.jsでさくっとパララックスを実装しよう

今回はパララックスエフェクトを簡単に実装できるJavaScriptのライブラリです。
このJSですが、軽量のバニラのライブラリのため重くなりにくくお勧めです。

simpleParallax.jsは、imgタグに適用されるため拝啓画像ではなく、直接画像にパララックスアニメーション実装することができます。
HTML、CSSも分かりやすくなっていいですよね~!

先にデモからご覧ください。

では実際の実装方法から。

head内で下記JSを読み込みます。

▼ダウンロードして読み込み
<script src="simpleParallax.js"></script>

▼CDNで読み込み
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>

imgタグには任意のクラスを追加します。

<img class="pararaxImg" src="image.jpg">

最後にJavascriptです。

var image = document.getElementsByClassName('pararaxImg'); //指定したクラス
new simpleParallax(image);

これだけで実装完了です!

オプションについて

simpleParallax.jsではさまざまなオプションを設定できます。
全部で6項目です。

1)画像の動く方向を指定:orientation
2)視差効果:scale
3)オーバーフロー:overflow
4)時間:delay
5)アニメーション:transition
6)動きの停止:maxTransition

詳しくは公式デモを見て頂ければわかりやすいと思います。
みなさんも手軽にパララックスを実装してみてください!