【JavaScript】パララックス【Rellax.js】その②

①準備

CDNと自作JSファイル　⇒　body閉じタグの手前

    <!-- Rellax.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha512-f5HTYZYTDZelxS7LEQYv8ppMHTZ6JJWglzeQmr0CVTS70vJgaJiIO15ALqI7bhsracojbXkezUIL+35UXwwGrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- 自作JSファイル(CDNより後に書く) -->
    <script src="js/main.js"></script>
  </body>
</html>

 

<script>
var rellax = new Rellax(".js-rellax");
</script>

 

②コード

<div class="box">
  <img src="画像パス" alt="" class="js-rellax" />
</div>

 

③CSS

.box {
  background-image: url(背景画像パス);
  background-repeat: no-repeat;
  background-size: cover;
  height: 590px;
  margin-inline: auto;
  padding-left: 50px;
  padding-right: 50px;
  width: 200px;
}
img {
  object-fit: contain;
  width: 100%;
}
body {
  margin-bottom: 600px;
  margin-top: 200px;
}