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

[@mehmetyavuzkatranc7724]

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]

👊 I got you

[@DTUSEM]

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

[@CodinginPublic]

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.

[@MarshallSC1]

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]

🙏 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 :)

[@RobertMcGovernTarasis]

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]

Great! Glad it was a timely help!

[@vladimirbaetel2947]

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]

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

[@DTUSEM]

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

[@CodinginPublic]

👊

[@lukecartwright613]

Another amazing video 👏

[@CodinginPublic]

🙏 glad it was a help!

[@JohnKomarnicki]

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

[@CodinginPublic]

Nice! It’s pretty useful!

[@Pupu._]

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

[@CodinginPublic]

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

[@stiviniii]

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]

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

[@stiviniii]

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

[@CodinginPublic]

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.

[@sidben7048]

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

[@CodinginPublic]

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: kzbin.info/www/bejne/g5qXdnlvgJ1ql68

[@blakegiunta]

Great vid. What code font is that??

[@CodinginPublic]

Hey, thanks! Cascadia Code! More info here: kzbin.info/www/bejne/a6aohYeOrbudbtU

[@linezokode9766]

first

[@CodinginPublic]

🙌