[번역] Apple 웹사이트 애니메이션 분석(크롤링 동기화)-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-24 12:53:10

원래의

195명이 탐색했습니다.

기사 원문 링크

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

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

? 재현된 구현

1. 스크롤 동기화

애니메이션 상태는 스크롤 위치(scrollY)를 기준으로 실시간으로 계산됩니다.

2. 양방향 애니메이션

아래로 스크롤할 때: 텍스트는 위로 이동하고 페이드 아웃되며, 동영상은 축소됩니다.
위로 스크롤할 때: 텍스트가 아래로 이동했다가 다시 나타나고, 동영상은 확대됩니다.

3. CSS 속성 활용

변환을 사용하세요:translateY 및 스크롤 위치에 비례하여 값 조정
requestAnimationFrame을 사용하면 부드러운 애니메이션이 보장됩니다.

? HTML 구조

HTML 구조는 텍스트와 배경 영상이 포함된 간단한 레이아웃으로 구성됩니다.

[Translations] Analyzing Apple Website Animation (crolling Synchronization)

? 재현된 구현

스크롤 위치에 따라 부드러운 애니메이션이 가능하도록 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);
});

로그인 후 복사