parallax.js

まずは実装サンプルを確認。iOS, android非対応です。

ファイルの読み込み&呼び出し

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

<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<script>
$('.parallax-window').parallax({
imageSrc: '/images/img/SCT_6430.JPG',
speed:0.3
});
</script>

cssの記述

.parallax-window {
min-height: 400px;
}

htmlの記述

<div class="parallax-window" data-parallax="scroll" data-image-src="/images/img/SCT_6430.JPG"></div>

参考サイト

公式サイト http://pixelcog.github.io/parallax.js/