intersection observer

by kpulkit29

HTML

<div class="container">
  <figure>
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
 
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="The Clifton Suspension Bridge" />
   <!--  <figcaption><a href="#">2</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/sunset.jpg" alt="Sunset and boats" />
   <!--  <figcaption><a href="#">3</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/snowy.jpg" alt="a river in the snow" />
   <!--  <figcaption><a href="#">4</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" alt="a single checked balloon" />
    <!-- <figcaption><a href="#">5</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/dog-balloon.jpg" alt="a hot air balloon shaped like a dog" />
    <!-- <figcaption><a href="#">6</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/abq-balloons.jpg" alt="View from a hot air balloon of other balloons" />
    <!-- <figcaption><a href="#">7</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/disney-balloon.jpg" alt="a balloon fairground ride" />
   <!--  <figcaption><a href="#">8</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-harbor.jpg" alt="sunrise over a harbor" />
  <!--  <figcaption><a href="#">9</a></figcaption> -->
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" alt="three hot air balloons in a blue sky" />
    <!-- <figcaption><a href="#">10</a></figcaption> -->
  </figure>
  <figure>
  <img src="https://assets.codepen.io/12005/toronto.jpg" alt="the Toronto light up sign at night" />
 <!--    <figcaption><a href="#">11</a></figcaption> -->
  </figure>
    <figure>
  <img...

CSS

body {
  background-color: #000;
  font: 1.1em Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
}

figure > img {
  grid-row: 1 / -1;
  grid-column: 1;
} 
figure a {
  color: black;
  text-decoration: none;
}

/* figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255,255,255,.5);
  padding: .2em .5em;
  justify-self: start;
} */

.container {
  column-count: 4;
  column-gap: 10px;
}

JavaScript

let targets = document.querySelectorAll('.container > figure');
targets = targets[targets.length-1];

  const io = new IntersectionObserver((entries,observer)=>{
    entries.forEach(entry=>{
    console.log(entry);
      if(entry.isIntersecting){
        console.log("here");
        }
    })
  },{threshold:[0.2]});

io.observe(targets);