[번역] Apple 웹사이트 애니메이션 분석(크롤링 동기화)

기사 원문 링크

---

Apple 공식 웹사이트는 콘텐츠를 강조하기 위해 부드러운 스크롤 기반 애니메이션을 사용합니다. 이번 게시물에서는 구현을 이해하기 위해 유사한 애니메이션을 분석하고 복제해 보겠습니다.

---

? 원래 Apple 웹사이트(비디오)

---

? 재현된 구현

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. 요청애니메이션 프레임

• 부드러운 작동을 위해 브라우저의 최적화된 렌더링 루프를 활용하여 애니메이션 성능을 향상시키는 비동기 기능입니다.

1. 양방향 애니메이션

• 아래로 스크롤: 텍스트는 위로 이동하고 페이드 아웃되며, 동영상은 축소됩니다.

• 위로 스크롤: 텍스트는 아래로 이동했다가 다시 나타나고, 동영상은 확대됩니다.

위 내용은 [번역] Apple 웹사이트 애니메이션 분석(크롤링 동기화)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!