今回はパララックスエフェクトを簡単に実装できる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
詳しくは公式デモを見て頂ければわかりやすいと思います。
みなさんも手軽にパララックスを実装してみてください！