A very simplified guide on the Intersection Observer API, with examples

Рет қаралды 3,622

7 ай бұрын

While there are many libraries out there for intersection animations, you can also use the INTERSECTION OBSERVER API in JavaScript. This API allows you to observer intersections of elements, and trigger things like transitions, lazy-loading and lots more.
In this video, I help you understand how this API works, and show you some transition examples.
Codepen link: codepen.io/Dillion/pen/abXyZKw
Helpful resources:
* Visibility vs Display: • DISPLAY:NONE and VISIB...
_____
Subscribe to My Channel: bit.ly/deeecode
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida

Пікірлер: 32

@user-xx6wy1xr1v 12 күн бұрын

You are a next best Web development commentator. Excellent explanation. I didn't just get a clarity on a Intersection Observer subject, but on other CSS classes. Thanks for your efforts.

@benficafutbol4651 4 ай бұрын

Really well explained, I was struggling to understand the options, and you cleared it up really well. Thank you.

@bigshuff Ай бұрын

Mate that was really good watched it several times now. Thanks

@deeecode Ай бұрын

Glad you enjoyed it

@CLeovison 7 ай бұрын

Thankyouu so muuuch for early christmas gift, i have been waiting for this. ❤️❤️

@deeecode 7 ай бұрын

I'm so glad to hear. Let me know what you build with this :)

@lvekua 6 ай бұрын

Awesome guide! thank you!

@deeecode 6 ай бұрын

Glad you enjoyed it!

@marializa505 3 ай бұрын

Excellent information, thank you so much for explaining in a way that's easy to understand! :)

@deeecode 3 ай бұрын

I'm so glad to hear

@escaparatevisual 7 ай бұрын

Awesome stuff! Thank you for sharing!

@deeecode 7 ай бұрын

You're very welcome!

@BlackPlavy 2 ай бұрын

Great video, thanks!

@deeecode Ай бұрын

You’re welcome :)

@fnfal113 Ай бұрын

great vid!

@PhucTran-zj5is Ай бұрын

Thanks for your help bro. Keep it up ❤

@deeecode 29 күн бұрын

You're very welcome!

@nomeconfundas 24 күн бұрын

thanks for this great video bro! I would like to check a case with responsive design with lets say some rows with images that in desktop have for example 4 images but in mobile only 2. how would the load behaviour be in both or even more cases like this?

@princeweb1 Ай бұрын

Thank you :)

@deeecode Ай бұрын

You're welcome!

@FumezCreates 4 ай бұрын

Excellent Video

@deeecode 4 ай бұрын

Glad you enjoyed it

@HelloWorld17th 6 ай бұрын

Really awesome video 📸🎉🎉...

@deeecode 6 ай бұрын

Glad you enjoyed it

@LokiDaFerret 3 ай бұрын

Hmmmm. Can I specify the root margin in terms of viewport units like VH? It seems like that would be much more practical since 100px is a very small amount on a very big device. Whereas 100px is a very large amount on an old device like an iPhone 3.

@cratortech3d472 7 ай бұрын

Awesome

@deeecode 7 ай бұрын

You're welcome!

@user-kt7uk9cq7c 5 ай бұрын

iam surprised how threshold property will access by entries parameter, what is the reason behind it and in callback function another parameter also we can put that is observer like this const obsCallback = function (entries, observer) { entries.forEach(entry => { console.log(entry); }); }; const obsOptions = { root: null, threshold: 0.2, }; const observer = new IntersectionObserver(obsCallback, obsOptions); observer.observe(section1); but another doubt how observer will as parameter ok if it has parameter then how internally thread will execute this code (javaScript runs on single thread only right.....) please explain how thread will execute this I researched alot but i never find how this will works internally every article and every vedio explained like this only please reply me with answer