Stellar.js

2023年12月6日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「Stellar.js」を利用してパララックス（視差効果）に挑戦してみたいと思います。

パララックスとは

パララックス（Parallax）とは「視差」という意味で、スクロールに応じて複数の要素のスピードを変化させることで遠近感や立体感を出すための手法だそうです。

サイトにパララックスを取り入れる方法はいくつかあるようですが、今回は「Stellar.js」というプラグインを使ってみます。

Stellarとは「星の」という意味で、ラテン語のStella（星）が語源です。ステラーラ（ウステキヌマブ）と同じですね。

Stellar.js

参考：Stellar.js

参考：ブログ-Blog｜佐藤純平-Jumpei Sato｜「Stellar.js」を使ったパララックスエフェクト

まずはStellar.jsのサイトの「Download」→GitHubの「Code」→「Download ZIP」からダウンロード、解凍して「jquery.stellar.min.js」をjQueryの後で読み込みます。

なぜかjQuery3だと動かなかったので、jQuery2にしました。

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script src="js/jquery.stellar.min.js"></script>

スクリプトを記述します。

$(function(){
  $(window).stellar({
    horizontalScrolling: true,
    verticalScrolling: true,
    responsive: true
  });
});

これで準備完了です。

CSSを記述します。

親要素にposition:relative、動かす子要素にposition:absoluteを設定します。

.shape-wrapper {
  position: relative;
  max-width: 300px;
  width: 90%;
  margin: 4em auto;
  height: 1000px;
}

.shape {
  position: absolute;
  border-radius: 50%;
  will-change: top;
  z-index: -1;
}

.shape.no1 {
  width: 100px;
  height: 100px;
  background: #007bff;
  left: 0;
  top: 0;
}
.shape.no2 {
  width: 60px;
  height: 60px;
  background: #28a745;
  left: 100px;
  top: 50px;
}
.shape.no3 {
  width: 40px;
  height: 40px;
  background: #dc3545;
  left: 200px;
  top: 250px;
}
.shape.no4 {
  width: 80px;
  height: 80px;
  background: #17a2b8;
  left: 200px;
  top: 300px;
}
.shape.no5 {
  width: 150px;
  height: 150px;
  background: #007bff;
  left: 40px;
  top: 400px;
}
.shape.no6 {
  width: 60px;
  height: 60px;
  background: #dc3545;
  left: 200px;
  top: 55px;
}
.shape.no7 {
  width: 30px;
  height: 30px;
  background: #ffc107;
  left: 60px;
  top: 500px;
}
.shape.no8 {
  width: 120px;
  height: 120px;
  background: #ff8300;
  left: 100px;
  top: 300px;
}
.shape.no9 {
  width: 60px;
  height: 60px;
  background: #910082;
  left: 200px;
  top: 300px;
}
.shape.no10 {
  width: 70px;
  height: 70px;
  background: #32bdeb;
  left: 50px;
  top: 90px;
}
.shape.no11 {
  width: 20px;
  height: 20px;
  background: #28a745;
  left: 100px;
  top: 250px;
}
.shape.no12 {
  width: 30px;
  height: 30px;
  background: #910082;
  left: 220px;
  top: 430px;
}
.shape.no13 {
  width: 40px;
  height: 40px;
  background: #dc3545;
  left: 260px;
  top: 520px;
}
.shape.no14 {
  width: 50px;
  height: 50px;
  background: #ffc107;
  left: 100px;
  top: 130px;
}
.shape.no15 {
  width: 70px;
  height: 70px;
  background: #32bdeb;
  left: 220px;
  top: 640px;
}
.shape.no16 {
  width: 100px;
  height: 100px;
  background: #28a745;
  left: 120px;
  top: 730px;
}
.shape.no17 {
  width: 50px;
  height: 50px;
  background: #ff1493;
  left: 80px;
  top: 170px;
}
.shape.no18 {
  width: 30px;
  height: 30px;
  background: #f08300;
  left: 20px;
  top: 190px;
}
.shape.no19 {
  width: 90px;
  height: 90px;
  background: #ff1493;
  left: 10px;
  top: 70px;
}
.shape.no20 {
  width: 40px;
  height: 40px;
  background: #17a2b8;
  left: 90px;
  top: 30px;
}

親要素にshaper-wrapper、動かす要素にshapeとno〇というクラスを付与し、data-stellar-rario属性を記述します。

data-stellar-ratioの値が大きいほど速く、小さいほどゆっくり動くようです。

<div class="shape-wrapper">
  <div class="shape no1" data-stellar-ratio="0.2"></div>
  <div class="shape no2" data-stellar-ratio="0.3"></div>
  <div class="shape no3" data-stellar-ratio="1.1"></div>
  <div class="shape no4" data-stellar-ratio="1.5"></div>
  <div class="shape no5" data-stellar-ratio="0.6"></div>
  <div class="shape no6" data-stellar-ratio="0.2"></div>
  <div class="shape no7" data-stellar-ratio="1.4"></div>
  <div class="shape no8" data-stellar-ratio="0.5"></div>
  <div class="shape no9" data-stellar-ratio="0.8"></div>
  <div class="shape no10" data-stellar-ratio="0.4"></div>
  <div class="shape no11" data-stellar-ratio="1.1"></div>
  <div class="shape no12" data-stellar-ratio="0.2"></div>
  <div class="shape no13" data-stellar-ratio="0.9"></div>
  <div class="shape no14" data-stellar-ratio="0.6"></div>
  <div class="shape no15" data-stellar-ratio="0.5"></div>
  <div class="shape no16" data-stellar-ratio="1.2"></div>
  <div class="shape no17" data-stellar-ratio="1.3"></div>
  <div class="shape no18" data-stellar-ratio="0.4"></div>
  <div class="shape no19" data-stellar-ratio="0.5"></div>
  <div class="shape no20" data-stellar-ratio="0.9"></div>
</div>

まとめ

なんかスマホだとガタガタするなあ。

もうちょっと勉強して、スマホでもいい感じに動く面白いスクロールエフェクトを作ってみたいです。