スクロール連動で画像が固定＆全画面に拡大するアニメーション

おしゃれなWebサイトでよく見かける、スクロールすると画像が固定され、画面いっぱいに拡大するアニメーションをGSAP（ScrollTrigger）を使って実装してみました。

実装例とともに、コードの仕組みを解説しています。

実装例

早速ですが以下が実装例です。

画像が拡大・固定されることで、ユーザーの目を引くインパクトある表現が可能になります。特に、商品のビジュアルやブランドイメージを強調したいシーンで効果的です。今回は静止画で実装していますが、動画を使った演出にも応用できそうです。

ただし、このようなアニメーションは一時的にスクロール操作を“奪う”ような体験になるため、使い所を絞って演出のアクセントとして使うのが理想的でしょう。

コードの解説

アニメーションの仕組みを中心に解説していきます。

HTML/CSS

HTMLとCSSのコードは次のとおりです。

1
<div class="wrapper js-zoom-fixed-animation">
2
  <figure class="container">
3
    <div class="mask">
4
      <img class="img" src="https://picsum.photos/1200/900/?random=1" alt="画像" />
5
    </div>
6
  </figure>
7
</div>

1
.wrapper {
2
  width: 100%;
3
  height: 350vh;
4
}
5

6
.container {
7
  width: 100%;
8
  height: 100vh;
9
  display: flex;
10
  align-items: center;
11
  justify-content: center;
12
  position: sticky;
13
  top: 0;
14
}
15

16
.mask {
17
  position: relative;
18
  overflow: hidden;
19
  aspect-ratio: 3 / 2;
20
}
21

22
.img {
23
  width: 100%;
24
  height: 100%;
25
  position: absolute;
26
  inset: 0;
27
  object-fit: cover;
28
}

スクロール領域と要素の固定

CSSではcontainerを全画面表示にし、position: sticky;を指定することでビューポートの上部に張り付いて表示しています。親要素のスクロール領域の中で要素を固定するため、今回はfixedではなくstickyを使用しています。

一方、親要素であるwrapperでは高さ（今回は350vh）を設定し、子要素が追従可能な領域を明示的に確保しています。この高さがあることで、containerを固定したままマスクと画像のアニメーションを発動させることができます。

画像のマスクを用意

mask要素にはoverflow: hidden;を指定し、マスクからはみ出た部分を非表示にしています。これにより、マスクのサイズが変化すると画像の見える領域も連動して変化します。

JavaScript

JavaScriptのコードは次のとおりです。

1
const wrapper = document.querySelector(".js-zoom-fixed-animation");
2
const container = wrapper.querySelector(".container");
3
const mask = wrapper.querySelector(".mask");
4
const img = wrapper.querySelector(".img");
5

6
// スクロールに応じてマスクのサイズを広げる
7
gsap.fromTo(
8
  mask,
9
  {
10
    width: "40%",
11
  },
12
  {
13
    width: "100%",
14
    height: () => window.innerHeight + "px",
15
    scrollTrigger: {
16
      trigger: container,
17
      endTrigger: wrapper,
18
      start: "top top",
19
      end: "bottom bottom",
20
      scrub: 1.2,
21
      invalidateOnRefresh: true,
22
    },
23
  }
24
);
25

26
// スクロールに応じて画像のサイズを縮小
27
gsap.fromTo(
28
  img,
29
  { scale: 2 },
30
  {
31
    scale: 1,
32
    scrollTrigger: {
33
      trigger: container,
34
      endTrigger: wrapper,
35
      start: "top top",
36
      end: "bottom bottom",
37
      scrub: 1.2,
38
      invalidateOnRefresh: true,
39
    },
40
  }
41
);

スクロール操作に応じて2つの異なるアニメーションを設定しています。マスクと画像、それぞれに異なる動きを与えることで、よりダイナミックな視覚効果を実現しています。

マスクのサイズを拡大する処理

マスクは幅と高さの両方を変化させています。

widthは40%から100%に、heightは初期値（aspect-ratioで自動計算された値）からビューポートの高さに拡大しています。

またScrollTriggerのオプションであるinvalidateOnRefresh: trueを指定することで、ブラウザのリサイズ時にwindow.innerHeightの値を再計算しています。

このようにwidthとheightを同時に拡大することで、マスクの拡大がより自然に、かつ全画面へと切り替わるように見せることが可能となります。

画像のスケールを縮小する処理

次に、画像そのものに対してscaleアニメーションを設定しています。初期状態では画像を拡大表示（scale: 2）させ、アニメーションの完了時には等倍（scale: 1）に戻しています。

このアニメーションは、マスクの拡大と組み合わせることで、「マスクが拡がり、画像はちょうどよく収まる」ように見せる工夫です。視覚的なバランスの問題で追加している処理なので、必要に応じて省略可能です。

まとめ

以上、GSAPを用いた画像拡大・固定アニメーションの実装方法でした。

スクロール領域の高さ、scrubの値、画像のscaleの初期値を変更することで、動きをアレンジすることが可能です。デザインのアクセントとして使うときにぜひ参考にしてみてください。