A naukri.com initiative
Dev
3w
395
Image Credit: Dev
Animate hero elements with scroll-driven CSS animations
- GitHub's landing page features a well-designed centered hero design with a sign-up box that fades away while moving behind the code editor once scrolled down.
- Using position:sticky property, the hero box can be placed inside a container and make it stick somewhere when the user scrolls around.
- The hero box element should slide under the other elements to create the effect, to create new stacking context, isolation CSS property can be used.
- Scroll-driven animations allow to use the CSS Animations API to add scroll animation behavior and it provides a massive performance boost compared to thousands of firing scroll handlers.
- To enable scroll-driven animations, there are two new timelines: scroll progress (animation-timeline: scroll()) and view progress (animation-timeline: view()) timelines.
- An animation timeline specifies the timeline used to control the progress of a CSS keyframe animation. animation-range enables us to define the start and end of our scroll-driven animation.
- To make the animation visible while the text is sticky, we can control the animation depending on the view progress of another element with a named view progress timeline.
- Using modern CSS paired with progressive enhancement, we can give users the best experience if their browsers support it.
- If you want to learn more about scroll-driven animations, Bramus from the Chrome DevRel team maintains scroll-driven-animations.style.
- Scroll-driven animations provide a fantastic performance and an exciting feature that is being developed for future web authors and developers.
Read Full Article
23 Likes
For uninterrupted reading, download the app