Original Article Link
The official Apple website uses smooth scroll-based animations to highlight its content. In this post, we will analyze and replicate a similar animation to understand its implementation.
The HTML structure consists of a simple layout with text and a background video.
Set up CSS to enable smooth animations based on the scroll position.
/* 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; }
Calculate the state of the text and video based on the scroll position and update their styles in real-time.
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: Adjusts the opacity of the text to gradually fade out based on the scroll position.
textTranslateY: Calculates how far the text moves upward in proportion to the scroll progress.
videoScale: Adjusts the scaling of the video to shrink proportionally with the scroll position.
Scrolling Down: The text moves upward and fades out, while the video scales down.
Scrolling Up: The text moves downward and reappears, while the video scales up.
The above is the detailed content of [Translations] Analyzing Apple Website Animation (crolling Synchronization). For more information, please follow other related articles on the PHP Chinese website!