最近好きな『要素が重なっていく表現』を簡単に再現してみた！

スピッカートの金山(@spicato_kana)です。
久しぶり（約 1 年ぶり）のテックブログです。。。

今回は、最近よく見かける『要素が重なっていく表現』を再現してみたいと思います。

参考サイトリスト

1. Casa ZIZO
2. 株式会社ニューピース
3. Heure Bleue

この表現を使うことにより、レイヤー感を出すことで奥行きを出し立体感、没入感を出すことが出来るのかなと思っています。

実装方法はいろいろありますが、今回は GSAP を使って実装してみたいと思います。

実装内容

読み込みの都合上一度『Return』を押下した方が良いかもしれません。。。

実際のコード内容を上記の codepen をご覧ください！

今回は、GSAP を用いていますが、GSAP を使わなくても IntersectionObserver を使って実装することも可能です。
また、GSAP のpinを使っているサイトが多いのですが、どうしても安定して実装することが難しく、iPhone だとずれたりすることが多々あったため今回は使っていません。（私の実装力が足りないだけ。。。）

実装方法

それでは簡単な実装方法をご紹介します！

npm

npm install gsap

インストールするのは GSAP のみです。

HTML

<div class="container">
  <section class="section section1">
    <div class="section__pin">1</div>
  </section>

  <section class="section section2">
    <div class="section__pin">2</div>
  </section>

  <section class="section section3">
    <div class="section__pin">3</div>
  </section>

  <section class="section section4">
    <div class="section__pin">4</div>
  </section>

  <section class="section section5">
    <div class="section__pin">5</div>
  </section>
</div>

今回は、5 つのセクションを用意しています。
わかりやすくするために、sectionタグを用いていますが、divタグでも問題ありません。（むしろsectionタグを使用するなら見出しがある方がいい）

イメージとして、親の要素に対して pin 要素 を作成して、その要素を固定していくという実装になります。

CSS

.section {
  height: 150vh;
  position: relative;
  color: #fff;

  &1 {
    background-color: #111;
  }

  &2 {
    background-color: #333;
  }

  &3 {
    background-color: #666;
  }

  &4 {
    background-color: #999;
  }

  &5 {
    background-color: #ccc;
  }

  &__pin {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

JavaScript

// import
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// main
const sections = document.querySelectorAll(".section");
sections.forEach((section) => {
  const pin = section.querySelector(".section__pin");
  const height = section.getBoundingClientRect().height;

  gsap.set(pin, {
    height: height,
  });

  ScrollTrigger.create({
    trigger: section,
    start: "bottom bottom",
    // わかりやすいようにマーカーを表示。本番環境では削除してください！
    markers: true,
    onEnter: () => {
      gsap.set(pin, {
        position: "fixed",
        top: "auto",
        bottom: 0,
        left: 0,
      });
    },
    onLeaveBack: () => {
      gsap.set(pin, {
        position: "absolute",
        top: 0,
        bottom: "auto",
        left: 0,
      });
    },
  });
});

この量のコードだけで実装ができます！
まず、pin 要素はのちにfixedになるので親の要素の高さを取得して付与しています。

ScrollTrigger を用いて、onEnterとonLeaveBackでpin要素のpositionを変更し固定していきます。

まとめ

今回は、最近個人的に好きな『要素が重なっていく表現』を再現してみました。
名称があれば教えていただきたいです。。。

また、端的に実装したのでもっとこうした方がいいとかあると思いますがここに味付けしていけばなんとかなると思います。たぶん。

こういったちょっとした表現だけで没入感が生まれ、ユーザーの体験が向上するのではないかと思っています。（願望）

また、参考サイトにもありますが、これにプラス演出を加えることでより良い表現が可能になります！
例えば、今回は要素を固定して重ねていますが、固定させたい要素をスクロール方向の逆に動かして固定しているような表現をすることで、リッチな表現をすることができます。
そこに、固定要素を縮小したり、色を変えたり、薄くしたりなど。。。

いろいろサイトを見て、好きな表現を見つけたら自分ならこう実装する。
さらに、プラス演出を加えてみてより自分好みにする、制作するサイトにあった表現をするなどして手札を増やしていけば、より良いサイトが作れるのではないかと思います！

短い記事ですが、最後まで読んでいただきありがとうございました！