近年のWebデザインでは、スクロールに応じた動的なエフェクトがトレンドとなっています。
特に、ズームイン・アウトのアニメーションは、視線誘導や情報の強調に役立ち、コンテンツのインパクトを強めることができます。これは、単なる静的なデザインよりも、動きのあるコンテンツがユーザーの注意を引き、記憶に残りやすいためです。
そこで今回は、カスタムコードを活用して、スクロールに応じたズームアニメーションを追加する方法を解説します！
⚫︎カスタムコードとは？
Studioのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。
ズームイン・アウトアニメーションとは？
ズームアニメーションの基本
ズームアニメーションとは、スクロールに応じて要素のサイズ（scale）を変化させるエフェクトです。
通常、Webページでは要素が静的に表示されますが、ズーム効果を追加することで、コンテンツに動きが生まれ、より洗練されたデザインに仕上げることができます。
ズームアニメーションを取り入れるメリット
✅ コンテンツに動きを加え、印象に残りやすくする
✅ スクロールに合わせて情報の強調や視線誘導を自然に行う
✅ UX（ユーザーエクスペリエンス）を向上し、より魅力的なデザインを実現
Studioのカスタムコードを使用すれば、簡単にズームイン・アウトのスクロールアニメーションを実装できます。
ズームイン・アウトを実装する手順
カスタムCSSの追加
まず、Studioの「カスタムコードエディタ」に以下のコードを追加します。
このCSSは、スクロール時に要素をズームイン・アウトさせるための基盤となるスタイルです。
/* IDに「zoom」を含む要素の初期スタイル */
[id*="zoom"] {
transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* 透明度とサイズの変化をスムーズに */
transform-origin: center; /* 拡大・縮小の基点を中央に */
transform: scale(0.5); /* 初期サイズを小さく設定 */
opacity: 1; /* 初期状態では表示 */
}✅ transition: opacity 0.5s ease-out, transform 0.5s ease-out;
- 透明度とサイズの変化をスムーズにする。
ease-outを使うことで、スクロール時に自然な動きを実現。
✅ transform-origin: center;
- 拡大・縮小の基点を中央に固定する（左上などにズレるのを防ぐ）。
✅ transform: scale(0.5); opacity: 1;
- ページロード時の初期サイズを50%に設定（スクロールで拡大）。
- 初期状態では表示された状態にする。
JavaScriptの追加
次に、「カスタムコードエディタ」に以下のJavaScriptを追加し、スクロール時にズームイン・アウトのアニメーションを適用します。
<script>
setTimeout(() => {
window.addEventListener("scroll", function () {
const zoomElements = document.querySelectorAll("[id*='zoom']");
if (!zoomElements.length) return;
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
const fadeStart = 0;
const fadeEnd = windowHeight * 2;
const minScale = 1.0;
const maxScale = 2.5;
zoomElements.forEach(element => {
if (scrollPosition >= fadeStart && scrollPosition <= fadeEnd) {
const progress = scrollPosition / fadeEnd;
const opacity = 1 - progress;
const scale = minScale + progress * (maxScale - minScale);
element.style.opacity = opacity;
element.style.transform = `scale(${scale})`;
} else if (scrollPosition > fadeEnd) {
element.style.opacity = 0;
element.style.transform = `scale(${maxScale})`;
} else {
element.style.opacity = 1;
element.style.transform = `scale(${minScale})`;
}
});
});
}, 500);
</script>スクロール位置の取得
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;✅ window.scrollY; → 現在のスクロール位置を取得。
✅ window.innerHeight; → 画面の高さを取得し、ズーム計算に使用。
ズーム範囲とスケールの設定
const fadeStart = 0;
const fadeEnd = windowHeight * 2;
const minScale = 1.0;
const maxScale = 2.5;✅ minScale = 1.0; → 初期の最小サイズ。
✅ maxScale = 2.5; → スクロール時の最大サイズ。
スクロール時のズーム計算
const progress = scrollPosition / fadeEnd;
const opacity = 1 - progress;
const scale = minScale + progress * (maxScale - minScale);✅ スクロールの進行度に応じて、透明度とサイズを変化。
実装結果
このカスタムコードを適用すると、スクロールに応じて要素が拡大・縮小するアニメーションが追加されます。下記はズームしながら透明になって消えていくようなアニメーションです。
さらに、下記のように複数の画像をズームイン・アウトして表示させることで、ギャラリーサイトなどで洗練された表現をすることが可能です。
STUDIOのカスタムコード実装例をチェック！
もっとStudioのカスタムコードでの事例を見たい方はこちら！
https://kreaidesign.studio.site/library
最新の制作事例をInstagramでチェックしてみてください！
InstagramのDMからお仕事のご相談をいただいた、先着５名様限定で定価の10％OFFにて、WEBサイト制作を実施させて頂きます！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr
私のココナラサービスでは、Studioを用いたWEBデザインから実装のサービスを提供しています。
カスタムコードのみの対応も承っていますので、ウェブサイトに個性を加えるためのカスタムコードを入れたい方、ぜひ詳細はココナラのプロフィールページをご覧ください。
まとめ：STUDIOのカスタムコードでサイトの魅力をアップ！
ズームイン・ズームアウトのスクロールアニメーションを導入することで、サイトのデザインに動きとインパクトを加えることができます。特に、コンテンツの強調や視線誘導に効果的で、UXの向上につながります。👉 Studioでカスタムコードを活用し、魅力的なWebサイトを実装してみましょう！ 🚀
コメント