Learn how to create true parallax effects using CSS-only techniques in this 18-minute video tutorial. Discover how to leverage the scroll-timeline: scroll() property to achieve authentic parallax scrolling without relying on JavaScript. Explore the process of setting up HTML structure, stacking elements with CSS, and creating animations for parallax effects. Master the application of scroll-based animations and learn to control the speed of individual layers. Address common issues such as element positioning and overflow handling. Gain insights into browser support and the use of polyfills to ensure compatibility across different platforms.
Overview
Syllabus
- Introduction
- How we need to set up our HTML
- Stacking everything with CSS
- Creating the animation for the parallax
- Applying the animation to when the user scrolls with animation-timeline scroll
- Changing the “speed” of each element
- Making sure the elements don’t go in front of other content
- Overflow hidden doesn’t work
- Browser support and a polyfill
Taught by
Kevin Powell
Related Courses
-
Incredible Scroll-Based Animations with CSS-Only
-
JavaScript Scroll Animation Tutorial - Web Animations API
-
Animate Navigation on Scroll - CSS-Only and Easy to Customize
-
JavaScript Scroll Animation Tutorial - Web Animations API and ScrollTimeline
-
Parallax in HTML, CSS and JavaScript Tutorial - Let's Make It Happen
-
Level Up Your CSS Animation Skills
4.0
