Fade Navbar and Images on Scroll (with the Intersection Observer JavaScript API)

Рет қаралды 5,582

Күн бұрын

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: github.com/coding-in-public/r...
- Live Code: codinginpublic.dev/projects/r...
- MDN docs: developer.mozilla.org/en-US/d...
- Andy Bell’s CSS reset: piccalil.li/blog/a-modern-css...
---------------------------------------
📹 Related Videos 📹
- Responsive Navigation: • Responsive Navbar HTML...
---------------------------------------
⏲️ 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: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned

Пікірлер: 30

@mehmetyavuzkatranc7724 2 жыл бұрын

Yesterday me and some friends (who are learning web development) were inspecting a website that does images on scroll and we were like "how the hell can we do this?". Timing and video recommendation is perfect. Thank you for the video.

@CodinginPublic 2 жыл бұрын

👊 I got you

@MarshallSC1 2 жыл бұрын

Tutorials and content quality of the highest level. I wish I had access to you channel when I was starting out and learning webdev, would greatly shorten my learning time. I also like that you put in the effort to style your tutorial projects, however small they might be or unneeded to get the point of the functionality across. Thank you very much and keep it up!

@CodinginPublic 2 жыл бұрын

🙏 That's very kind. Just trying to make tutorials that would have been a help to me a few months back. I figure if I keep doing that, I can be a help to others. Just got to keep ahead of myself enough to keep putting things out :)

@vladimirbaetel2947 2 жыл бұрын

Chris, I've been a big fan for a while now, but damn do you videos come in handy! This is just what I needed ~ clean, easy to understand and implement. Thanks for the vid!

@CodinginPublic 2 жыл бұрын

🙏 that’s very kind. Glad to know it was a help! Thanks for taking the time to say something!

@DTUSEM 2 жыл бұрын

I also needed this. I was trying to understand it. Thanks Big Brother

@CodinginPublic 2 жыл бұрын

👊

@Pupu._ 2 жыл бұрын

thank you for the video! I am always struggling with scroll and your video is very helpful

@CodinginPublic 2 жыл бұрын

So glad it was a help! Thanks for your kind comment.

@lukecartwright613 2 жыл бұрын

Another amazing video 👏

@CodinginPublic 2 жыл бұрын

🙏 glad it was a help!

@RobertMcGovernTarasis 2 жыл бұрын

Oooo perfect timing, I’d read something earlier about intersectional observes but hadn’t dug into it (ended up in a 90 minute call)

@CodinginPublic 2 жыл бұрын

Great! Glad it was a timely help!

@JohnKomarnicki 2 жыл бұрын

Awesome, i actually just started using this not to long ago!

@CodinginPublic 2 жыл бұрын

Nice! It’s pretty useful!

@DTUSEM 2 жыл бұрын

I request to make series on how to make a blog website completely.

@CodinginPublic 2 жыл бұрын

Sounds like good material for a course :) When I get around to doing an Astro intro, I may make it a blog :)

@nnamdinwolisa8771 Жыл бұрын

So glad I found your video. I'm currently working on a project, and I needed a more efficient way to do this to avoid the issues of "scroll listeners". Thank you for this clean and helpful tutorial. Is this part of a series where you created the site from scratch?

@CodinginPublic Жыл бұрын

Glad you enjoyed it! I’m pretty sure I did several videos using this site, but I don’t think I built out the body from scratch? I could be wrong though. I know I did one on the nav bar.

@sidben7048 2 жыл бұрын

thank you sir for this tutorial, can you also cover other observers such as mutation, resize, and performance observer

@CodinginPublic 2 жыл бұрын

Hey! Thanks for the suggestion. It may be a bit until I get around to those, but Web Dev Simplified has done some great tutorials on those. Here's the mutation one, for instance: kzfaq.info/get/bejne/g89keKlqsJ6bkYE.html

@stiviniii 2 жыл бұрын

Another great tutorial, please make a video of the ajax effect, for blog posts as lastly said. I want to apply it to my WordPress blog

@CodinginPublic 2 жыл бұрын

Hey! Glad you enjoyed it. Not exactly sure what you mean by the Ajax effect?

@stiviniii 2 жыл бұрын

@@CodinginPublic when someone scrolls to the bottom, more articles load up

@CodinginPublic 2 жыл бұрын

Ah, okay, so fetching more data from a server. Got it. I've got it on my list for sometime, but it may be a bit. In the meantime, you can look for the last item in your list of current articles. When you get near the bottom (use the rootMargin), trigger another catch and updated your "last item" in your article list to the new last item. Hopefully that helps in the meantime.