Introduction to the Intersection Observer JavaScript API
ฝัง
- เผยแพร่เมื่อ 11 มิ.ย. 2019
- 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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
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.
This video is so good. Came at the perfect time. Thanks Kevin!!
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.
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.
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.
This is extraordinary to be honest. The way you explain it is just so easy on the brain!
This finally simplified everything after an afternoon of trying to work out intersection observer by reading. Amazing.
Extremely clear and helpful video. I'm going to use the intersectionObserver from here on out for work. No more annoying scroll listeners!!
You always bring such creative content with most practical and easy to learn JS implementations .Best channel for learning Web Development
So useful! I've been searching it for a while... Thanks! Wondrous content.
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.
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!
Waiting for the next videos about this very interesting topic.
As always great info, thanks!
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!
I always like your videos before I watch it and I have never been disappointed. Great job Kevin and thank you for this ❤️
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
Kevin! I love your videos. You are the best source on youtube what I found regarding to front end dev
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.
Thanks, I had a really hard time understanding this from the documentation. You cleared it up nicely for me.
Very useful and straightforward. You are amazing Kevin!!!
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.
It seems that this could add credibility to a portfolio page. THANK-YOU!
Great content, well explained. Hope to see more of Observers
2 years later, this video is still the best out there to explain this, thanks a lot!
hello fellow time traveler
you are a great developer man , thank you so much for all of your work
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);
}
Again, A Super Awesome Tutorial! Love It!
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.
One of the best video to understand Intersection observer. Thank you Kevin :) :) :)
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.
This helps me a lot. Thank you!
You deserve more subscribers Kevin. Glad I am one of your subscriber. 👍👍👍
I have Observed this!!!!!! It is now stored in my Intersection.
Really clever explanations, thank you very much!
Love your videos Always like before watch Keep making those Cool JS Videos very helpful and interesting!!
This is super easy to understand and have saved my life, thanks dude
Really useful and interesting video! Thank you!
wow sir...you brought a new topic this time...and its related to js...its awesome 👍👍👍
The best tutorial i found on this topic
PS: I have looked over a lot of them
Thank you so much. I learned something new today.
Very excellent demonstration. Thanks you
Thanks a lot. I have already put it all to my project !
Awesome explanation! Thank you very much!
Great video! Thank you!
crystal clear explaination ❤️ ❤️.... Thank you so much for the tutorial.
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 :)
Sir your explanation has boosted my knowledge about Intersection observer
Thanks a lot
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!
awesome explanation! Thank you for sharing!
THANK YOU!!! Best explanation ever!
i love the way you explain!!!
Very nice and clean explanation. Thanks! :)
Omg it is so powerful. Thanks for sharing your knowledge.
Very nice programming video. Your audio is nice and you're a very good explainer.
Amazing thankyou so much for this tutorial!
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
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 👍
@@KevinPowell Yaaaaasss!!!
supports not to bad caniuse.com/#search=intersection
great video, thanks for share your knowledges with us
Very informative for me , thank you man 🔥🔥👌
Fantastic explanation!
thank you very much for this amazing video
Very informative, thanks!
Thanks Kevin. This is very interesting.
It is great explanation. Thank you!
It was very helpful. Thanks a lot)
Great video, thanks.
Thank you for the video, very informative, and great explanation.
Great❤️!! Thank you Sir for Posting these useful contents with good explanation.
Thanks man, you are making most useful videos ever!
Thanks, glad you enjoyed it :D
Wonderful video, Kevin! Keep up the good work!
Brilliant Kevin! Thanks
Blew my mind! Thx
Awesome exactly what i needed
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.
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!
Thank you a lot !
Thanks for awesome video🔥🔥
Awesome explanation ation!
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 !
Perfect intro!
Great video.
Thanks dad.
Wow, that is so cool, thank you :)
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!
i love your working, Kevin, from VietNam
Great! Now all the pieces begin to fit together...
Hey Kevin! Any chance you could show an example on how to use intersection observer with a performant parallax?
Thanks Kevin!
Amazing content!
This is a game changer 🙌
Nice. Thanks
Omg i can't wait till next week 😭
THIS IS AWESOME.
Starts at 02:50// Just watched the video, really clear and easy to follow. Thanks :)
i like tho "pop" sound effect you made haha
Cool vid tnx for sharing 🥰
Good stuff! Any place to get those original CSS and HTML files to "play along"? ;-)
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.
Still the best explanation how intersection observers work.
Thanks! 🙂
thank you ! please do more JS videos
Thanks a lot.