JSFiddle - React, Tailwind, and code Playground

by Hemant Sharma

HTML

<div class="App">
      <div class="wrapper">
        <h1>JavaScript Intersection Observer API</h1>
        <div class="container">
          <p>
            <img
              src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://rukminim1.flixcart.com/image/704/704/j7usl8w0/poster/t/x/y/medium-nature-background-wallpaper-poster-png6n7po761-original-imaexz4q8q6cunwm.jpeg?q=70"
              alt=""
            />
          </p>
          <p>
            <img src="https://wallpapercave.com/wp/nsu3cSp.jpg" alt="" />
          </p>
          <p>
            <img
              src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc4BhBdhhDRo-0gB87_6YZ63AidrcAy5fEz8TG9che4UTxcW5O"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://newevolutiondesigns.com/images/freebies/colorful-background-30.jpg"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://images.template.net/wp-content/uploads/2014/09/Desktop-Background-20-Copy.jpg"
              alt=""
            />
          </p>
          <p>
            <img
              src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt=""
            />
          </p>
          <p>
            <img
             ...

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
  //background-image: url(https://cdn.pixabay.com/photo/2018/04/14/16/29/cube-3319359_960_720.jpg);
  height: 100vh;
  width: 100%;
  //opacity: 0.4;
}

.container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
  flex-wrap: wrap;
  p {
    width: 50%;
    padding: 0px 5px 10px 0;

    img {
      width: 100%;
    }
  }
}

JavaScript

const images = document.querySelectorAll("img");

const imgaeOptions = {};

const imgObserver = new IntersectionObserver((entries, imgObserver) = {
	entries.forEach(entry => {
  	console.log(entry);
  });
}, imageOptions);

images.forEach(image => {
	imgObserver.observer(image);
})