[翻譯]蘋果網站動畫分析（滾動同步）

原文連結

---

蘋果官方網站使用流暢的滾動動畫來突出其內容。在這篇文章中，我們將分析並複製一個類似的動畫以了解其實現。

---

？原始蘋果網站（影片）

---

？轉載實施

1. 滾動同步

• 動畫狀態是根據滾動位置（scrollY）即時計算的。

2. 雙向動畫

• 向下捲動時：文字向上移動並淡出，而影片縮小。
• 向上捲動時：文字向下移動並重新出現，同時影片放大。

3.CSS屬性利用

• 使用變換：translateY 和與滾動位置成比例的縮放值。
• 使用 requestAnimationFrame 確保平滑的動畫。

---

？ HTML結構

HTML 結構由帶有文字和背景影片的簡單佈局組成。

---

？轉載實施

設定 CSS 以根據捲動位置啟用流暢的動畫。

/* 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（基於滾動的動畫）

根據捲動位置計算文字和影片的狀態並即時更新其樣式。

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

---

?️關鍵操作分解

?️關鍵功能說明

1. 基於滾動的計算

• textOpacity：依照捲動位置調整文字的不透明度逐漸淡出。

• textTranslateY：計算文字與滾動進度成比例向上移動的距離。

• videoScale：調整影片的縮放比例，使其隨著滾動位置按比例縮小。

1. requestAnimationFrame

• 非同步函數，透過利用瀏覽器最佳化的渲染循環實現流暢操作來增強動畫效能。

1. 雙向動畫

• 向下捲動：文字向上移動並淡出，同時影片縮小。

• 向上捲動：文字向下移動並重新出現，同時影片放大。

以上是[翻譯]蘋果網站動畫分析（滾動同步）的詳細內容。更多資訊請關注PHP中文網其他相關文章！