Apple公式サイトのアニメーション分析 (第1回: スクロール同期)

Apple公式サイトでは、スクロールに反応する滑らかなアニメーションを活用して、コンテンツを際立たせています。本記事では、同様のアニメーションを実装する方法を分析し、再現してみます。

🎥 Apple公式サイトの元動画

📜 修正版の実装手法

1. スクロール同期

スクロール位置 (scrollY) を基準に、アニメーションの状態をリアルタイムで計算します。

2. 双方向アニメーション

スクロールを下方向に動かす場合: テキストが上に移動して消え、動画が縮小されます。
スクロールを上方向に戻す場合: テキストが再び下に現れ、動画が拡大されます。

3. CSSプロパティの活用

transform: translateY と scale の値をスクロール位置に応じて動的に計算します。
アニメーションが滑らかに動作するよう、requestAnimationFrame を使用します。

🔧 HTML構造

HTMLはテキストと背景動画を簡単に組み合わせた構造になっています。

<div class="container">
  <div class="text-section">
    <h1 class="text">革新的なデザイン</h1>
    <p class="subtext">Appleの新たな次元を体感してください。</p>
  </div>
  <div class="video-section">
    <video class="background-video" autoplay muted loop>
      <source src="example-video.mp4" type="video/mp4" />
    </video>
  </div>
</div>

🎨 CSSスタイリング

スクロール位置に応じた滑らかなアニメーションを実現するためのCSS設定です。

/* テキストセクション */
.text-section {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 2;
}

.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-video {
  width: 100vw;
  height: auto;
}

🎬 JavaScript (スクロールに比例するアニメーション)

スクロール位置に基づいてテキストと動画の状態を計算し、スタイルをリアルタイムで更新します。

const textSection = document.querySelector(".text-section");
const videoSection = document.querySelector(".video-section");

function handleScroll() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;

  const textOpacity = Math.max(0, 1 - scrollY / (windowHeight / 2));
  const textTranslateY = Math.min(scrollY / 2, 100);

  textSection.style.transform = `translateY(-${textTranslateY}px)`;
  textSection.style.opacity = textOpacity;

  const videoScale = Math.max(0.5, 1 - scrollY / (windowHeight * 2));
  videoSection.style.transform = `scale(${videoScale})`;
}

window.addEventListener("scroll", () => {
  requestAnimationFrame(handleScroll);
});

🖥️ 主な動作の説明

scrollYに基づく計算

textOpacity: テキストの透明度をスクロール位置に応じて徐々に減少させます。
textTranslateY: テキストが上方向に移動する量をスクロール比率で計算します。
videoScale: 動画の縮小サイズをスクロール位置に基づいて調整します。

2.requestAnimationFrame

ブラウザのアニメーション性能を向上させ、滑らかな動きを提供する非同期関数です。

3.双方向の動作

スクロール下方向: テキストは上に移動して消え、動画は縮小します。
スクロール上方向: テキストは下に戻り再び現れ、動画は拡大します。