[Übersetzungen] Analysieren der Apple-Website-Animation (Laufsynchronisation)

Link zum Originalartikel

Die offizielle Apple-Website verwendet flüssige scrollbasierte Animationen, um den Inhalt hervorzuheben. In diesem Beitrag werden wir eine ähnliche Animation analysieren und replizieren, um ihre Implementierung zu verstehen.

? Original-Apple-Website (Video)

? Reproduzierte Implementierung

1. Scroll-Synchronisierung

• Der Animationsstatus wird in Echtzeit basierend auf der Scroll-Position (scrollY) berechnet.

2. Bidirektionale Animation

• Beim Herunterscrollen: Der Text bewegt sich nach oben und wird ausgeblendet, während das Video verkleinert wird.
• Beim Scrollen nach oben: Text bewegt sich nach unten und erscheint wieder, während das Video vergrößert wird.

3. Nutzung von CSS-Eigenschaften

• Verwenden Sie transform: translatorY und skalieren Sie Werte proportional zur Scrollposition.
• Eine reibungslose Animation wird mit requestAnimationFrame gewährleistet.

? HTML-Struktur

Die HTML-Struktur besteht aus einem einfachen Layout mit Text und einem Hintergrundvideo.

? Reproduzierte Implementierung

Richten Sie CSS ein, um flüssige Animationen basierend auf der Bildlaufposition zu ermöglichen.

/* 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 (Scroll-basierte Animation)

Berechnen Sie den Status von Text und Video basierend auf der Scroll-Position und aktualisieren Sie deren Stile in Echtzeit.

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

?️ Aufschlüsselung der Schlüsseloperationen

?️ Erklärung der Schlüsselfunktionen

1. Scrollbasierte Berechnung

• textOpacity: Passt die Deckkraft des Textes so an, dass er basierend auf der Bildlaufposition allmählich ausgeblendet wird.

• textTranslateY: Berechnet, wie weit sich der Text im Verhältnis zum Scrollfortschritt nach oben bewegt.

• videoScale: Passt die Skalierung des Videos an, um proportional zur Bildlaufposition zu verkleinern.

1. requestAnimationFrame

• Eine asynchrone Funktion, die die Animationsleistung verbessert, indem sie die optimierte Rendering-Schleife des Browsers für einen reibungslosen Betrieb nutzt.

1. Bidirektionale Animation

• Nach unten scrollen: Der Text bewegt sich nach oben und wird ausgeblendet, während das Video verkleinert wird.

• Nach oben scrollen: Der Text bewegt sich nach unten und erscheint wieder, während das Video vergrößert wird.

Das obige ist der detaillierte Inhalt von[Übersetzungen] Analysieren der Apple-Website-Animation (Laufsynchronisation). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!