こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はオシャレなサイトを作る際、使えるかもしれないパララックスライブラリ「Rellax.js」を紹介します！

公式サイトはこちら（別タブで遷移します。）

実装例

HTML例

まずはじめに下記コードを＜head>内、もしくはjsファイルの前に記述してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>

そうしたら＜body＞内に下記コードを記述します。

<div class="js-parallax" data-rellax-speed="-2">
  <img src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2024/11/emoji-4920963_1280.jpg" alt="">
</div>
<div class="js-parallax" data-rellax-speed="3">
  <img src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2024/11/amazed-1295833_1280.png" alt="">
</div>
<div class="js-parallax" data-rellax-speed="8">
  <img src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2024/11/fish-158184_1280.png" alt="">
</div>

CSS例

.js-parallax img{
  margin: auto;
  width: 60%;
  display: block;
}
.js-parallax:nth-of-type(2){
  position: relative;
  left: -70px;
}
.js-parallax:nth-of-type(3){
  position: relative;
  right: -70px;
}

JavaScript例

var rellax = new Rellax('.js-parallax');

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！