Главная
Study mode:
on
1
- Introduction
2
- merch
3
- The HTML and starting CSS
4
- Adding position: sticky
5
- Creating a simple animation
6
- Making the animation work on scroll
7
- Controlling when the animations starts and ends
8
- Making the distance more intuitive
9
- Adding more custom properties
10
- Dealing with browser support
11
- The glashmorphism version setup
12
- Making the nav slide in once we scroll down
13
- Adjusting the width of the nav when it reappears
Description:
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.

Animate Navigation on Scroll - CSS-Only and Easy to Customize

Kevin Powell
Add to list
0:00 / 0:00