simplePARALLAX.js

まずは実装サンプルを確認

ファイルの読み込み

/templates/footer.htmlに以下のソースを張り付ける。

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>

javascriptの記載

/templates/footer.htmlに以下を張り付ける。また、オプションは公式サイトをご覧ください。

<script>
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
delay: '3.0',
scale: '1.5'
});
</script>

htmlの記述

divタグなどを入れずに、imgタグだけで記述します。divタグが自動で付与されます。

<img src="/images/img/SCT_6430.JPG" class="thumbnail">

実装サンプル

https://www.ichihara-juki.co.jp/corporate

参考サイト