ページを奥にスクロールさせる（HTML、JavaScript）

この記事は2021年12月に公開しました。
GSAP は当時の版（3.8.0）を使っています。
今は Webflow が GSAP を提供していて、配布元のサイトも gsap.com に変わりました。

スクロールすると、画面の奥へ進んでいくように見える。
この記事では、そんな動きのデモと作り方を紹介します。

奥にスクロールしているように見せる
デモページ
準備
HTML
CSS
JavaScript
あとがき

奥にスクロールしているように見せる

ブラウザのスクロールは、縦の動きです。
JavaScript を使うと、奥にスクロールしているように要素を動かせます。
ページにメリハリを付ける手段の1つとして、使える場面がありそうです。

デモページ

動きは、デモページで確かめられます。
下の画像は、デモページをスクロールした時の動きです。

デモページで動きを見るデモページをスクロールすると、枠が広がり、4〜6の色の四角が奥から順に大きくなって出てくる様子

準備

GSAP（GreenSock が開発した JavaScript のライブラリ）を使います。
次のページからダウンロードできます。
GSAP Installation

次の2つのファイルを読み込みます。

<script src="./umd/gsap.js"></script>
<script src="./umd/ScrollTrigger.js"></script>

HTML

アニメーションさせる要素は、まとめて囲んでいます。

<div class="item item01"><span>1</span></div>
<div class="item item02"><span>2</span></div>
<div class="item item03"><span>3</span></div>

<div class="area js-area">
  <div class="wrap">
    <!-- ↓　アニメーションさせる要素 -->
    <div class="waku js-waku01"></div>
    <div class="waku js-waku02"></div>
    <div class="item item04 js-item js-item04"><span>4</span></div>
    <div class="item item05 js-item js-item05"><span>5</span></div>
    <div class="item item06 js-item js-item06"><span>6</span></div>
    <!-- ↑　アニメーションさせる要素 -->
  </div>
</div>

<div class="item item01"><span>7</span></div>
<div class="item item02"><span>8</span></div>
<div class="item item03"><span>9</span></div>

CSS

アニメーションさせる要素は、position: absolute で配置します。
はみ出た部分は、見えないようにしています。

.area{
  overflow: hidden;
}
.wrap{
  position: relative;
  height: 100vh;
}
.item{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}
.item01{ background: #e94d15; }
.item02{ background: #f18d1d; }
.item03{ background: #f8b633; }
.item04{ background: #8cc561; }
.item05{ background: #56aa59; }
.item06{ background: #3d6b35; }

.item01,
.item02,
.item03{
  height: 100vh;
  width: 100%;
}

.item04,
.item05,
.item06{
  position: absolute;
}
.waku{
  position: absolute;
  top: 0;
  left:0;
  z-index: 10;
  width: 100%;
  height: 100%;
  border: 10px solid #333;
  box-shadow: inset 0 0 5px 5px #aaa;
}

JavaScript

次の順に動かします。

位置を決めて、scale を 0 にする
トリガーが画面の一番上まで来たら、開始する
その位置に固定し、スクロール量に応じて、要素を順に拡大する
開始位置から 4000px スクロールしたら、終了する

window.addEventListener("load", function(){

  //プラグインを定義
  gsap.registerPlugin(ScrollTrigger);

  const area  = document.querySelector(".js-area");
  const items = document.querySelectorAll(".js-item");
  const num   = items.length;

  //位置とscaleを指定
  items.forEach((item, i) => {
    gsap.set(item, {
      zIndex : num - i,
    });
  });
  gsap.set(".js-waku01", {
    scale: 0.9,
  });
  gsap.set(".js-waku02", {
    scale: 0.3,
  });
  gsap.set(".js-item04", {
    scale: 0, width: "75%", height: "50%", left: "12.5%", top: "25%",
  });
  gsap.set(".js-item05", {
    scale: 0, width: "75%", height: "50%", left: "12.5%", top: "25%",
  });
  gsap.set(".js-item06", {
    scale: 0, width: "100%", height: "100%", left: 0, top: 0,
  });

  //タイムライン
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: area, //トリガー
      start: "top top", //開始位置
      end: "+=4000", //終了位置
      scrub: true, //スクロール量に応じて動かす
      pin: true, //ピン留め
    }
  });

  //要素を順に拡大する
  tl.to(".js-waku01", { scale: 1.2, duration: 0.5})
    .to(".js-waku02", { scale: 1.2, duration: 1}, "<" )
    .to(".js-item04", { scale: 1, left: "-37.5%", top: "5%", duration: 1 },"-=0.5")
    .to(".js-item04", { opacity: 0, duration: 0.2 }, "-=0.2")
    .to(".js-item05", { scale: 1, left: "62.5%", top: "55%", duration: 1 }, "-=0.5")
    .to(".js-item05", { opacity: 0, duration: 0.2 }, "-=0.2")
    .to(".js-item06", { scale: 1, duration: 1 }, "-=0.5")
});