Introduction to the Intersection Observer JavaScript API

Рет қаралды 176,039

5 жыл бұрын

You can find the code here: • Introduction to the In...
Use the following link to get 2 FREE months to Skillshare: skl.sh/kevinpowell4
Intersection Observer is a JavaScript API that we can use to do a lot of really useful things that we used to have to rely on scroll event listeners for. Instead of firing off over and over and over again on tons of items, they sit there and wait for their target intersect with the page before firing.
We can use them to watch for when things enter or leave the viewport, and we can play with the options to change how much of the item has entered (the threshold), or how far into the page it is (the rootMargin).
In this video we're exploring the fundamentals of how they work so that in the following weeks we can start having fun with them!
This video was sponsored by Skillshare.
#javascript #intersectionobserver
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 258

@bobmarteal 4 жыл бұрын

Kevin, the amount of content you pick for each video is perfect. Much more than what you covered would swamp people. Great example and explanation.

@jesseearley2019 3 жыл бұрын

Thank you for this straightforward and easy to understand video. This allowed me to accomplish EXACTLY what I've been trying to figure out how to do, which in my case was perform some simple animation for elements as the user scrolled down the page.

@stefanallchorne8667 5 жыл бұрын

This video is so good. Came at the perfect time. Thanks Kevin!!

@anawhite2562 4 жыл бұрын

Thank you so much! One new thing I learned today after watching this video: unobserve() will stop observing a specified element, while disconnect() will stop observing all of them.

@MrAnmoltiwari 4 жыл бұрын

This is extraordinary to be honest. The way you explain it is just so easy on the brain!

@annasognosia Жыл бұрын

Kevin is a pleasure to listen to. I'm grateful to anyone who posts any level of understanding but Kevin makes it easier by explaining how it works.

@dan110024 2 жыл бұрын

This finally simplified everything after an afternoon of trying to work out intersection observer by reading. Amazing.

@tanishqmanuja 5 жыл бұрын

You always bring such creative content with most practical and easy to learn JS implementations .Best channel for learning Web Development

@justinoneill2837 4 жыл бұрын

had no idea about this one! literally just decked out a project w/ scroll fx too but had to use the debounce technique. this is exactly what i was missing

@chrisallen3807 4 жыл бұрын

Extremely clear and helpful video. I'm going to use the intersectionObserver from here on out for work. No more annoying scroll listeners!!

@jenso413 Жыл бұрын

I haven't even watched much of the video yet and I already know it's gonna be great. Thanks so much for everything you post, I finally got a job in web dev and my company uses intersection observer API, so here I am!

@Isabela-pj3bz 4 жыл бұрын

So useful! I've been searching it for a while... Thanks! Wondrous content.

@hsdev 3 жыл бұрын

Thanks so much for explaining this with such clarity and detail. I was trying to wrap my head around this API and your video really helped me get it. Thank You!

@ilan117 5 жыл бұрын

Hi Kavin :-) Thank you for this video! Something interesting and new to learn ... Honestly, the way you teach/speak makes it easy to understand and follow up. Yes, I am totally waiting for the "observer" next video... hopefully I will learn how to use it for manipulating the DOM e.g. animations and so! Thank you for a wonderful content.

@marcod.643 5 жыл бұрын

Waiting for the next videos about this very interesting topic. As always great info, thanks!

@frankdrolet9439 3 жыл бұрын

2 years later, this video is still the best out there to explain this, thanks a lot!

@danisob3633 3 жыл бұрын

hello fellow time traveler

@A_Lesser_Man 5 жыл бұрын

this is what i did with what you just taught me! thanks, Kevin! HTML file: test function action(entry) { entry.target.innerHTML = "YAHOO!"; } const options = { root: null, // null = viewport, default threshold: 0, // 0 means fire observer if any bit of element enters container and 1 means if all of element is within container (may use 0.25, etc) rootMargin: "0px" // some arbitrary number... }; const blah = newObserver("#test", options, action); javascript file: function newObserver(selector, options, entryAction, unobserve, DEBUG) { const element = document.querySelector(selector); const observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { if (DEBUG) { console.log(entry.target); } // some user created function to call to do shit to the entry if (entryAction) { entryAction(entry); } if (unobserve) { observer.unobserve(entry.target); } } }); }, options); observer.observe(element); }

@buchiolisa3878 4 жыл бұрын

I always like your videos before I watch it and I have never been disappointed. Great job Kevin and thank you for this ❤️

@jaymesinn5134 2 жыл бұрын

This video and your second on the topic really helped me out with a parallax fade in scroll effect I was working on for a project at work. Thabk you SO much! I love your videos and the fact you explain your methods.

@lawrenlelko 4 жыл бұрын

It seems that this could add credibility to a portfolio page. THANK-YOU!

@gergopeto3554 Жыл бұрын

Kevin! I love your videos. You are the best source on youtube what I found regarding to front end dev

@NoahNobody 4 жыл бұрын

Thanks, I had a really hard time understanding this from the documentation. You cleared it up nicely for me.

@milanm6538 5 жыл бұрын

Great content, well explained. Hope to see more of Observers

@nitram_nosnibor 3 жыл бұрын

Incredibly interesting and I can see how I can use that in many situations, thanks for sharing Kevin. Off the watch the others in this series now.

@airlobster2 5 жыл бұрын

Didn't know such thing even existed! I went straight away to add it to a grid-based table control (tabular data view, sortable columns, expandable rows, selections, sticky headers...) I'm writing these days. works great. thanks for that :)

@Fooljuice 2 жыл бұрын

Very useful and straightforward. You are amazing Kevin!!!

@einatblackrose Жыл бұрын

Hi Kevin, I guess I'm in a bit of a delay... but had to tell you that this video is so useful! After watching many videos trying to figure out something I was attempting to do, this was the only video that worked, and that's because I could actually understand what I'm doing rather than just copy-paste it as I normally do. I'm by no mean a js expert... to say the least, but you just explain so clearly. Somehow your videos always come to the rescue when I struggle with my codes, and I thank you a lot for it.

@Franiveliuselmago 4 жыл бұрын

Thanks a lot for this explanation! I used this to give color to my nav menu items acording to the section the user is viewing.

@FreeHindiAdvice 2 жыл бұрын

One of the best video to understand Intersection observer. Thank you Kevin :) :) :)

@djwave28 3 жыл бұрын

I have Observed this!!!!!! It is now stored in my Intersection.

@walidali3495 11 ай бұрын

you are a great developer man , thank you so much for all of your work

@parasarora5869 5 жыл бұрын

wow sir...you brought a new topic this time...and its related to js...its awesome 👍👍👍

@GamingBeast-nq9oo 5 жыл бұрын

Again, A Super Awesome Tutorial! Love It!

@alinawaz4034 5 жыл бұрын

Love your videos Always like before watch Keep making those Cool JS Videos very helpful and interesting!!

@wwt17 5 жыл бұрын

This is awesome. Can't wait for all of the series!!! For beginners you might want to mention that you need to npm i intersection-observer

@KevinPowell 5 жыл бұрын

I should have mentioned the polyfill for sure, but most beginners probably won't do it with npm from my experience 😁 I'll make a video at the end of the series to talk about the polyfill, as it's probably important to mention 👍

@wwt17 5 жыл бұрын

@@KevinPowell Yaaaaasss!!!

@justinoneill2837 4 жыл бұрын

supports not to bad caniuse.com/#search=intersection

@Shin-oj6mo 2 жыл бұрын

This helps me a lot. Thank you!

@gambomaster 4 жыл бұрын

You deserve more subscribers Kevin. Glad I am one of your subscriber. 👍👍👍

@Daniel-ij2xy Жыл бұрын

Really useful and interesting video! Thank you!

@jaday4230 2 жыл бұрын

This is super easy to understand and have saved my life, thanks dude

@iglesiasleonardo1742 3 жыл бұрын

Great video! Thank you!

@snowman_web_design_development 2 жыл бұрын

Fantastic explanation!

@sahajkapoor4718 4 жыл бұрын

The best tutorial i found on this topic PS: I have looked over a lot of them

@gnsp75 3 жыл бұрын

Really clever explanations, thank you very much!

@ajmaljoiya6006 3 жыл бұрын

Sir your explanation has boosted my knowledge about Intersection observer Thanks a lot

@germanduterte7110 4 жыл бұрын

Very excellent demonstration. Thanks you

@arabianoud313 4 жыл бұрын

Thank you for making this. I've been struggling with trying to figure this all out based on the MDN documentation alone. I've already started applying this to my project after watching this. Great intro!

@vinigarcia 4 жыл бұрын

Awesome explanation! Thank you very much!

@ganeshpatil6020 2 жыл бұрын

Thank you so much. I learned something new today.

@VideoNOLA 3 ай бұрын

Definitely helpful for reinitializing SVG animations when the scroll into view, especially is you included a block with an embedded background-image SVG using CSS, which otherwise sandboxes them from the containing DOM!

@user-se6ct5zu2f Жыл бұрын

i love the way you explain!!!

@rasmadrak 4 жыл бұрын

Very nice and clean explanation. Thanks! :)

@swarnavaghosh9555 4 жыл бұрын

Wonderful video, Kevin! Keep up the good work!

@bartek4033 4 жыл бұрын

Thanks a lot. I have already put it all to my project !

@busyrand 5 жыл бұрын

Very nice programming video. Your audio is nice and you're a very good explainer.

@camilogarcia1325 4 жыл бұрын

THANK YOU!!! Best explanation ever!

@iqwebserve3973 2 жыл бұрын

Great video, thanks.

@3xtraspicy 3 жыл бұрын

awesome explanation! Thank you for sharing!

@rebeka1212100 5 жыл бұрын

Very informative for me , thank you man 🔥🔥👌

@avinashmurmu9070 3 жыл бұрын

crystal clear explaination ❤️ ❤️.... Thank you so much for the tutorial.

@franco-cespi 3 жыл бұрын

Awesome explanation ation!

@user-mo3cw6go7c 2 жыл бұрын

Perfect intro!

@nathandowner6007 5 жыл бұрын

Very informative, thanks!

@adityabhave4053 5 жыл бұрын

Thanks Kevin. This is very interesting.

@MrGreenpaulo 4 жыл бұрын

Brilliant Kevin! Thanks

@luismiguelrodriguez4561 5 жыл бұрын

Omg it is so powerful. Thanks for sharing your knowledge.

@jacobbannier 4 жыл бұрын

Starts at 02:50// Just watched the video, really clear and easy to follow. Thanks :)

@cristianfz16 3 жыл бұрын

Amazing thankyou so much for this tutorial!

@GiancarloCarccamo 2 жыл бұрын

great video, thanks for share your knowledges with us

@fidansuleymanova5436 3 жыл бұрын

It is great explanation. Thank you!

@shinmini99 Жыл бұрын

Thanks for awesome video🔥🔥

@bokimitrovic9269 3 жыл бұрын

Thanks man, you are making most useful videos ever!

@KevinPowell 3 жыл бұрын

Thanks, glad you enjoyed it :D

@fidansuleymanova5436 4 жыл бұрын

It was very helpful. Thanks a lot)

@parisamt990 2 жыл бұрын

thank you very much for this amazing video

@awaisfiaz8186 4 жыл бұрын

Awesome exactly what i needed

@mahdimotallebi7207 2 жыл бұрын

Amazing content!

@dachd 4 жыл бұрын

Blew my mind! Thx

@propertunity 4 жыл бұрын

Hey Kevin! Any chance you could show an example on how to use intersection observer with a performant parallax?

@SarbbottamBandyopadhyay 3 жыл бұрын

Thank you for the video, very informative, and great explanation.

@elderf Жыл бұрын

This was great. I was trying to understand how scrollama.js works and this makes a lot of sense. In a way, I could just use the Intersection Observer API instead of the library if I wanted to go with Vanilla JS.

@tommy10436 Жыл бұрын

Great video. Thanks dad.

@bhuvans9042 2 жыл бұрын

Great❤️!! Thank you Sir for Posting these useful contents with good explanation.

@mythm2063 2 жыл бұрын

Thank you a lot !

@alexou857 3 жыл бұрын

Wow, that is so cool, thank you :)

@mrMinstrel 5 жыл бұрын

Great! Now all the pieces begin to fit together...

@tf7788 3 жыл бұрын

Great, thanks for sharing this ! I was going to use some libraries but with this, I will do my own animations and don't use any !

@realsakul 4 жыл бұрын

Thanks Kevin!

@lebsyt3892 3 жыл бұрын

Cool vid tnx for sharing 🥰

@ezekielswanson7813 2 жыл бұрын

Hey Kevin, thank you so much for the video. This was awesome. Just a heads up the link that's suppose to go to the code goes to back to your youtube video!

@J90JAM 3 жыл бұрын

This is a game changer 🙌

@eduardoaviles357 2 жыл бұрын

Still the best explanation how intersection observers work.

@frank3481 3 жыл бұрын

Nice. Thanks

@hoshiskychannel3054 4 жыл бұрын

i love your working, Kevin, from VietNam

@awal14h Жыл бұрын

i like tho "pop" sound effect you made haha

@sherifsalah5563 5 жыл бұрын

Omg i can't wait till next week 😭

@SumitKumar-tw4qe 4 жыл бұрын

THIS IS AWESOME.

@RazahLP 2 жыл бұрын

Thanks! 🙂

@michael.a.strauss 5 жыл бұрын

Good stuff! Any place to get those original CSS and HTML files to "play along"? ;-)

@roldy7534 4 жыл бұрын

this is phenomenal! where's the next 1 to this?

@CRBarchager 3 жыл бұрын

Here: kzfaq.info/get/bejne/iN6eiZyJyN2dYWg.html and the one after: kzfaq.info/get/bejne/ntuGfbpjmLCse4U.html and the last one it looks like: kzfaq.info/get/bejne/o6lpZt2kqtm3ops.html

@peter8261 Жыл бұрын

Very cool. I'm working on an animated CSS project and I only know a very small amount of JS. I'm trying to animate things upon scroll, and i think this is going to be my solution.