Learn how to create an animated navigation bar that responds to scrolling using only CSS in this 27-minute tutorial. Explore techniques for adding sticky positioning, creating simple animations, controlling animation timing, and implementing custom properties. Discover how to make the animation distance more intuitive and address browser support issues. Dive into a glassmorphism version of the navigation, including sliding effects and width adjustments. Perfect for web developers looking to enhance their CSS skills and create more dynamic, visually appealing websites.
Overview
Syllabus
- Introduction
- merch
- The HTML and starting CSS
- Adding position: sticky
- Creating a simple animation
- Making the animation work on scroll
- Controlling when the animations starts and ends
- Making the distance more intuitive
- Adding more custom properties
- Dealing with browser support
- The glashmorphism version setup
- Making the nav slide in once we scroll down
- Adjusting the width of the nav when it reappears
Taught by
Kevin Powell
