ブログ

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

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

視覚的なインパクトを与える演出として、商品紹介やブランドサイトにおすすめです。

実装例

実際の動き方は以下のCodePenでご確認ください。

画像が画面いっぱいに拡大し固定されるアニメーション

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

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

コードの解説

HTMLとCSSは上記のCodepen記載の通りです。

CSSのポイントとしてはcontainerを全画面幅にし、position: sticky;を指定することでビューポートの上部に張り付いて追従させています。

style.css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
}

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

style.css
.wrapper {
  width: 100%;
  height: 350vh;
}

スクロール連動アニメーションの解説

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

対象要素アニメーションの内容
.mask（マスク）画像を覆うマスクのサイズを拡大する
.img（画像）画像自体のスケールを縮小する（拡大から通常サイズに戻す）

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

.mask要素にはoverflow: hidden;を指定することで、画像の一部だけが表示されるようにしています。これによりマスクのサイズが変化することで画像の見え方も変化します。

アニメーションの中では、widthを40% → 100%に変化させ、あたかも画像がズームインしているような効果を演出しています。

プロパティ初期値アニメーション完了時
width40%100%
height成り行き（aspect-ratioで計算された値）ブラウザの高さ

また、heightはaspect-ratioによる自動計算ではなく、window.innerHeightを用いてブラウザの高さに合わせています。

script.js
height: () => window.innerHeight + "px",

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

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

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

プロパティ初期値アニメーション完了時
scale21

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

以上、GSAPを用いた画像拡大・固定アニメーションの仕組みでした。デザインのアクセントとして取り入れたい場合にぜひ活用してみたいです。

キーワード一覧