3Dパララックスエフェクトを簡単にキメる３つの法則

誰に向けた内容か

• JavaScript を用いてクリエイティブコーディングができる人、興味がある人
• JavaScript ライブラリ「GSAP」を用いてアニメーション実装できる人、興味がある人
• パララックスエフェクトを実装できる人、興味がある人

この記事で解説すること

3D パララックスエフェクトを簡単に実装する TIPS を紹介します。

以下の CodePen 作品は 3D パララックスエフェクトの使用例です。
Result エリアをスクロールして、アニメーションを確かめてください。
この記事を読むと、3D パララックスエフェクト作成方法のエッセンスを学べます。

3D パララックスエフェクトの使用例

See the Pen GSAP: ScrollTrigger Sample4 by Yusuke Nakaya (@YusukeNakaya) on CodePen.

サンプル完成品

以下リンクは、本記事で使うサンプルの完成品です。
サンプル作品（CodePen）

３つの法則

1. レイヤー を作ってオブジェクトを配置する
2. スクロールに連動して レイヤーの scale を変更 する
3. あえて 動かないものを配置 する

この３つを意識すれば、比較的簡単に実装できます。
それぞれ解説します。

法則1: レイヤーを作ってオブジェクトを配置する

オブジェクト1つに対し、1つのレイヤーを作ります。
レイヤーは１つずつ画面全体に広げます。
レイヤーの中にオブジェクトを１つ配置します。
背景もテキストも、表示するものすべてをオブジェクトとして考えます。

<div class="layer -bg">
  <div class="bg"><!-- 背景 --></div>
</div>

<div class="layer -text">
  <d class="text">
    <h1>Hello CodePen!<br>I'm Yusuke.<br>I love WebDev!</h1>
  </div>
</div>

<div class="layer -deco1">
  <div class="deco1"><!-- 装飾 --></div>
</div>

.layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

法則2: スクロールに連動してレイヤーの scale を変更する

レイヤーを拡大します。
オブジェクトを直接拡大しません。
理由は、画面の中央に拡大縮小の中心点を設定したいからです。

それぞれのオブジェクトに transform-origin を指定すれば可能ですが、
オブジェクトの位置を変更するとき、コード変更の手間がより多くかかります。

let scale = {
  bg: 1,
  text: 1,
}

window.addEventListener('wheel', event => {
  scale.bg += event.deltaY / 80000
  scale.text += event.deltaY / 4000
  
  gsap.to('.layer.-bg', {
    scale: scale.bg,
  })

  gsap.to('.layer.-text', {
    scale: scale.text,
  })
})

法則3: あえて動かないものを配置する

オブジェクトがにぎやかに動く中、動かないものを配置すると、
より視差を感じさせる効果があります。

このような3Dでは、オブジェクトがはみ出るようにフレームを配置すると、
より奥行きのある立体感を演出できます。

<div class="layer -frame">
  <div class="frame"><!-- フレーム --></div>
</div>

.frame {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border: 3px solid #fff;
  box-sizing: border-box;
}

以下のサンプルでは、窓の奥から手前に向けて、鳥が飛んでくるように見えませんか？
実際にそのような実装はなく、錯覚として「そう見える」だけです。

フレームを用いた錯覚の使用例

See the Pen Only CSS: Sunset Bird Reverse by Yusuke Nakaya (@YusukeNakaya) on CodePen.

終わりに

本記事があなたのテクニック向上に寄与できれば嬉しいです。

CodePen でたくさんの作品を投稿しています。よかったらご覧ください！
CodePen

主に X(Twitter) を使っています。よかったらフォローしてください！
Yusuke Nakaya