Maison >interface Web >tutoriel CSS >[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.
La structure HTML se compose d'une mise en page simple avec du texte et une vidéo d'arrière-plan.
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; }
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); });
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.
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!