[翻译]苹果网站动画分析（滚动同步）

原文链接

---

苹果官方网站使用流畅的滚动动画来突出其内容。在这篇文章中，我们将分析并复制一个类似的动画以了解其实现。

---

？原始苹果网站（视频）

---

？转载实施

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中文网其他相关文章！