[Traductions] Analyse de l'animation d'un site Web Apple (synchronisation défilante)

Lien de l'article original

Le site officiel d'Apple utilise des animations fluides basées sur un défilement pour mettre en valeur son contenu. Dans cet article, nous analyserons et reproduirons une animation similaire pour comprendre sa mise en œuvre.

? Site Web Apple original (vidéo)

? Implémentation reproduite

1. Synchronisation du défilement

• L'état de l'animation est calculé en temps réel en fonction de la position de défilement (scrollY).

2. Animation bidirectionnelle

• Lors du défilement vers le bas : le texte se déplace vers le haut et disparaît, tandis que la vidéo diminue.
• Lors du défilement vers le haut : le texte se déplace vers le bas et réapparaît, tandis que la vidéo s'agrandit.

3. Utilisation des propriétés CSS

• Utilisez transform : translateY et mettez les valeurs à l'échelle proportionnellement à la position de défilement.
• Une animation fluide est assurée grâce à requestAnimationFrame.

? Structure HTML

La structure HTML se compose d'une mise en page simple avec du texte et une vidéo d'arrière-plan.

? Implémentation reproduite

Configurez CSS pour activer des animations fluides en fonction de la position de défilement.

/* 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 (animation basée sur le défilement)

Calculez l'état du texte et de la vidéo en fonction de la position de défilement et mettez à jour leurs styles en temps réel.

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

?️ Répartition des opérations clés

?️ Explication des fonctionnalités clés

1. Calcul basé sur le défilement

• textOpacity : Ajuste l'opacité du texte pour qu'il disparaisse progressivement en fonction de la position de défilement.

• textTranslateY : calcule la distance vers laquelle le texte se déplace vers le haut proportionnellement à la progression du défilement.

• videoScale : Ajuste la mise à l'échelle de la vidéo pour la réduire proportionnellement à la position de défilement.

1. requestAnimationFrame

• Une fonction asynchrone qui améliore les performances d'animation en tirant parti de la boucle de rendu optimisée du navigateur pour un fonctionnement fluide.

1. Animation bidirectionnelle

• Défilement vers le bas : le texte se déplace vers le haut et disparaît, tandis que la vidéo diminue.

• Défilement vers le haut : Le texte se déplace vers le bas et réapparaît, tandis que la vidéo s'agrandit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!