スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

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>

参考サイト