元の記事リンク

Apple の公式 Web サイトでは、コンテンツを強調(diào)表示するためにスムーズなスクロールベースのアニメーションが使用されています。この投稿では、同様のアニメーションを分析および複製して、その実裝を理解します。

? Apple のオリジナル Web サイト (ビデオ)

?再現(xiàn)された実裝

1. スクロール同期

• アニメーションの狀態(tài)は、スクロール位置 (scrollY) に基づいてリアルタイムに計算されます。

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

• 下にスクロールする場合: テキストは上に移動してフェードアウトし、ビデオは縮小します。
• 上にスクロールするとき: ビデオが拡大しながら、テキストが下に移動して再表示されます。

3. CSSプロパティの活用

• transform:translateY を使用し、スクロール位置に比例して値をスケールします。
• requestAnimationFrame を使用すると、スムーズなアニメーションが保証されます。

? HTMLの構(gòu)造

HTML 構(gòu)造は、テキストと背景ビデオを含む単純なレイアウトで構(gòu)成されます。

?再現(xiàn)された実裝

スクロール位置に基づいてスムーズなアニメーションを有効にするように CSS を設(shè)定します。

/* Text Section */
.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 (スクロールベースのアニメーション)

スクロール位置に基づいてテキストとビデオの狀態(tài)を計算し、リアルタイムでスタイルを更新します。

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);
});

?? キー操作の內(nèi)訳

?? 主要な機能の説明

1. スクロールベースの計算

• textOpacity: スクロール位置に基づいて徐々にフェードアウトするようにテキストの不透明度を調(diào)整します。

• textTranslateY: スクロールの進行に比例してテキストが上にどれだけ移動するかを計算します。

• videoScale: スクロール位置に比例して縮小するようにビデオのスケーリングを調(diào)整します。

1. requestAnimationFrame

• ブラウザの最適化されたレンダリング ループを活用してアニメーションのパフォーマンスを向上させ、スムーズな操作を?qū)g現(xiàn)する非同期関數(shù)です。

1. 雙方向アニメーション

• 下にスクロール: テキストが上に移動してフェードアウトし、ビデオが縮小します。

• 上にスクロール: テキストが下に移動して再表示され、ビデオが拡大されます。

以上が[翻訳] Apple Web サイトのアニメーションの分析 (スクロール同期)の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。