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>