# Infinity Image Scrolling Using Intersection Observer API

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694852524558/b5a66513-2c03-4e3f-afdf-022de941a7ed.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694852668998/5629bbf4-11ef-4f86-afe0-5f3539458cab.png align="center")

I hope you understood this intersection part. now let's deep dive. See this picture.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694852753443/00ba12c1-ee19-481d-93d4-842f13967cad.png align="center")

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](https://kishorkumarparoi.github.io/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 :**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694853895608/39e500ed-5d11-4efa-82af-b936f9f4bc12.png align="center")

## CSS:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694853979035/a0529aa0-6bf4-4d27-b724-db783324921f.png align="center")

## JAVASCRIPT:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694854029321/9362b6d6-73b8-42da-9791-a7920585a450.png align="center")

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](https://github.com/KishorKumarParoi/infinity-image-scrolling)

Sources to learn more

* [https://developer.mozilla.org/en-US/docs/Web/API/Intersection\_Observer\_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
    
* [https://developer.mozilla.org/en-US/docs/Web/API/Document\_Object\_Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
    
* [https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
    
* [https://www.w3schools.com/js/js\_htmldom.asp](https://www.w3schools.com/js/js_htmldom.asp)