rellax.js
まずは実装サンプルを確認
-5あいうえおかきくけこ
0 あいうえおかきくけこ
5 あいうえおかきくけこ
rellax.jsのダウンロード
JSファイルをGitHubからダウンロード。/js フォルダーに保存し、アップロードしてください。
ファイルの読み込み
/templates/footer.htmlに以下のソースを張り付ける。
<script src="/js/rellax.min.js"></script>
<script>
// オプションを渡す
var rellax = new Rellax('.rellax', {
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false
});
</script>
cssの記述
CSSに「background-attachment: fixed;」を指定すると背景そのものにもより視差効果を与えられます。
.bg {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 800px;
background-image:url("https://www.s-contigo.website/images/img/SCT_6430.JPG");
background-size: contain;
background-attachment: fixed;
background-position:center top;
}
htmlの記述
data-rellax-speed="-5" という書き方で、スピード設定。-10 to 10までの値。
<div class="bg rellax" data-rellax-speed="7"> <div class="rellax" data-rellax-speed="-5">-5あいうえおかきくけこ</div> <div class="rellax" data-rellax-speed="0">0 あいうえおかきくけこ</div> <div class="rellax" data-rellax-speed="5">5 あいうえおかきくけこ</div> </div>