<div

  id="first-section"

  class="first-section"

>

  <h1>Deeecode</h1>

  <p class="tag">Simplify the web</p>

  <img

    src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

  />

  <div class="content">

    <p>

      Lorem ipsum dolor sit amet, consectetur

      adipiscing elit. Vivamus laoreet, lacus

      eu rhoncus ornare, est libero malesuada

      eros, ac dapibus risus ipsum et diam.

    </p>

    <p>

      Ut in urna ullamcorper, fermentum magna

      eu, euismod libero. Nullam et tempor

      nisi. Praesent hendrerit, purus quis

      ornare faucibus, turpis eros blandit

      nibh, eu interdum ex elit suscipit

      sapien. Duis tempus tempor neque, vel

      aliquam ex bibendum vitae.

    </p>

    <p>

      Proin sit amet massa quis nibh

      vulputate fermentum et eu nibh. Nulla

      quis accumsan purus. Proin pretium

      metus et magna hendrerit eleifend.

      Integer eu porta purus, eget gravida

      odio. Vivamus ultrices blandit aliquet.

      Donec cursus elementum imperdiet. Nam

      faucibus hendrerit turpis in gravida.

      Vivamus eleifend sit amet lacus sed

    </p>

  </div>

</div>

<div

  id="second-section"

  class="second-section"

>

  <h2>Second Section</h2>

  <img

    src="https://images.unsplash.com/photo-1549298916-b41d501d3772?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

  />

</div>

<div

  id="third-section"

  class="third-section"

>

  <h2>Third Section</h2>

  <div class="images">

    <img

      style="--index: 1"

      src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

    />

    <img

      style="--index: 2"

      src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

    />

    <img

      style="--index: 3"

      src="https://images.unsplash.com/photo-1562183241-b937e95585b6?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

    />

  </div>

</div>

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

​

body {

  margin: 0;

  color: white;

  font-family: Poppins;

  background-color: #333;

  padding-bottom: 200px;

}

​

.first-section,

.second-section,

.third-section {

  display: flex;

  align-items: center;

  flex-direction: column;

  padding: 60px;

}

​

.first-section {

  min-height: 100vh;

  background-color: #333;

  visibility: hidden;

  opacity: 0;

  transform: translateY(100px);

  transition: transform 1s, opacity 1s;

}

​

.first-section.loaded {

  opacity: 1;

  visibility: visible;

  transform: translateY(0px);

}

​

.first-section h1 {

  font-size: 8rem;

  line-height: 100%;

  margin: 10px 0 0;

}

​

.first-section .tag {

  font-size: 3rem;

  text-transform: uppercase;

  margin-bottom: 20px;

  color: rgb(253, 253, 139);

}

​

.first-section img {

  width: 100%;

  margin-bottom: 50px;

}

​

.content {

  font-size: 1.5rem;

}

​

.content p {

  margin-bottom: 30px;

}

​

.second-section {

  min-height: 80vh;

  background-color: rgb(29, 100, 166);

}

​

.second-section img {

  max-width: 800px;

  width: 100%;

}

​

.second-section h2 {

  font-size: 5rem;

  margin: 40px 0;

}

​

.second-section h2,

.second-section img {

  visibility: hidden;

  opacity: 0;

  transform: translateY(100px);

  transition: transform 1s, opacity 1s;

}

​

.second-section img {

  transition-delay: 300ms;

}

​

.second-section.fade-in :is(h2, img) {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}

​

.third-section {

  min-height: 60vh;

  background-color: rgb(77, 135, 11);

}

​

.third-section h2 {

  font-size: 5rem;

  margin: 40px 0;

}

​

.third-section :is(h2, img) {

  visibility: hidden;

  opacity: 0;

  transform: translateY(100px);

  transition: transform 1s, opacity 1s;

}

​

/* .third-section img:nth-child(1) {

  --index: 1;

}

.third-section img:nth-child(2) {

  --index: 2;

}

.third-section img:nth-child(3) {

  --index: 3;

} */

​

.third-section img {

  transition-delay: calc(var(--index) * 300ms);

}

​

.third-section.animate :is(h2, img) {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}

​

.third-section .images {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

​

.third-section img {

  width: 100%;

}

​

const firstSection = document.getElementById(

  "first-section"

)

​

const secondSection =

  document.getElementById("second-section")

​

const thirdSection = document.getElementById(

  "third-section"

)

​

const options = {

  rootMargin: "0px",

  threshold: 0.5

}

​

const observer = new IntersectionObserver(

  callbackFunction,

  options

)

​

function callbackFunction(enteries) {

  enteries.forEach(entry => {

    if (entry.isIntersecting) {

      if (entry.target.id === 'first-section') {

        entry.target.classList.add('loaded')

      }

​

      if (entry.target.id === 'second-section') {

        entry.target.classList.add('fade-in')

      }

​

      if (entry.target.id === 'third-section') {

        entry.target.classList.add('animate')

      }

​

      // everything

      observer.unobserve(entry.target)

    }

  })

}

​

​

​

observer.observe(firstSection)

observer.observe(secondSection)

observer.observe(thirdSection)

​