The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with the top-level document's viewport. This powerful API is especially useful for implementing features like lazy loading, infinite scrolling, and even animations based on scroll position.
- MDN Docs
Let's learn these things in easy and simple language as a kid learns from their mom. Can you remember where you first came to know the intersection word? It was your high school book, topic was intersection set, where we took common of some sets. Like, let's say A = {1,2,3} and B = {2,3,4} so here the common elements are C = {2,3}. Thus in web dev, we can control this by how much content we are showing (aka intersecting). See below Picture:
This picture is showing circle and in right side in console it is written "Circle is visible". So if circle isn't there been seen, it will be showing "Circle is not visible" like below picture.
I hope you understood this intersection part. now let's deep dive. See this picture.
Here the picture is seen but still, in the console, we see the "Circle is not visible" message. Why? Don't worry. I will make you understand like easy peasy. Here a term called 'Threshold' comes in. I can control how much I want to show and what message I will show then. The threshold value could be 0 to 1. Here I gave a threshold value of 0.8, that's why until the picture becomes 80% it will show "Circle is not visible". You have come a long to understanding intersection observer API. We will learn from analyzing and reviewing pictures.
Before that, visit this link: Infinity Image Scrolling
What did you see? Random images coming and effects are being applied. now let's see the html and css code. after that, we will understand the Javascript Code.
HTML :
CSS:
JAVASCRIPT:
So what I did here, I had inserted a "visible" class to the <img> tag classList along with the "image" class. so when the image is intersecting it is seen with Box-Shadow and some transition applied. When the picture is no more in focus, I removed the "visible" class from the <img> tag classList.This is the simple logic. IntersectionOberserver API's .isIntersecting method does that works of our logic.
Now let's jump into javascript code. At first, we fetched all of <img> tags using querySelectorAll('img'). Then we initiate a variable named observer which called IntersectionObserver. We pass our "images" list through this along with a threshold value of 0.8 which we learned earlier. Later work was done by forEach. We iterated over all of the single "image" and checked out if it was intersecting or not. If it was intersecting, we targeted that "image" classList and added a "visible" class. After exiting we removed the "visible" class automatically.
At last, we traversed over all images to apply this effect using forEach loop along with observer.observe(img).
Thus we made Infinity Image Scrolling using Intersection Observer API. This powerful API is especially useful for implementing features like lazy loading, infinite scrolling, and even animations based on scroll position.
Thank you for reading this article. Please give me feedback on how can I improve my writing. You are welcome to buy me a coffee and having chit-chat anytime.
If you think this blog helpful, please give a star to this GitHub repo: Infinity-Image-Scrolling
Sources to learn more