Fade Navbar and Images on Scroll (with the Intersection Observer JavaScript API)
In this video, I'll show you how to use the Intersection Observer API in Javascript. With some simple vanilla Javascript, we’ll trigger a class on our nav to add a background color on scroll and create a fade-up animation on images and different elements on the page. The intersection observer is more performant because it doesn’t have to watch every moment you scroll. You tell it what to watch and it’ll observe (almost like a click event listener) and run only when the element enters or leaves the page.
🔗 Key Links 🔗
- GitHub: https://github.com/coding-in-public/r...
- Live Code: https://codinginpublic.dev/projects/r...
- MDN docs: https://developer.mozilla.org/en-US/d...
- Andy Bell’s CSS reset: https://piccalil.li/blog/a-modern-css...
---------------------------------------
📹 Related Videos 📹
- Responsive Navigation: • Responsive Navbar HTML, CSS, and Java...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:42 Understanding the Intersection Observer
2:30 Fade Navbar on scroll
10:28 Fade images on scroll
17:59 Respecting reduce motion
---------------------------------------
🌐 Connect With Me 🌐
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: / cpenned
Смотрите видео Fade Navbar and Images on Scroll (with the Intersection Observer JavaScript API) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Coding in Public 29 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5,733 раз и оно понравилось 169 людям.