CodePen Embed - scroll image effect

<div class="main container">
  <section class="section">
    <div class="section-content">
      <h2 class="section-title">Javan rhino</h2>
      <p class="section-text">
        Once found throughout south-east Asia, Javan rhinos have suffered a
        staggering decline in their numbers due to hunting and habitat loss.
        The lone wild population of Javan rhinos is one of the rarest of the
        rhino species — around 75 individuals — which can only be found on
        the island of Java, Indonesia.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>

  <section class="section">
    <div class="section-content">
      <h2 class="section-title">Amur leopard</h2>
      <p class="section-text">
        The Amur leopard is one of the rarest big cats in the world, with
        only around 100 individuals left in the wild. Although their wild
        population seems to be stable and increasing, these leopard
        subspecies are still critically endangered since 1996. And there is
        a good reason that: Amur leopards can only be found in a relatively
        small region.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>

  <section class="section">
    <div class="section-content">
      <h2 class="section-title">Mountain gorilla</h2>
      <p class="section-text">
        The Mountain gorilla lives in two isolated populations in the
        high-altitude forests up in the volcanic, mountainous regions of the
        Congo, and in the Bwindi Impenetrable National Park of Uganda. At
        present, mountain gorillas are currently listed as endangered
        species, with just over 1,000 individuals in the wild.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>

  <section class="section">
    <div class="section-content">
      <h2 class="section-title">Sumatran tiger</h2>
      <p class="section-text">
        The Sunda Island tiger, or the Sumatran tiger, is the smallest tiger
        subspecies in the world, weighing up to 140kg. For reference, the
        tigers that live in the Amur region are the biggest of all the big
        cats where males can weigh up to twice as much as Sunda Island
        tigers. They are also very rare - there are estimated to be around
        600 in the wild, and are only found on the Indonesian island of
        Sumatra.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>

  <section class="section">
    <div class="section-content">
      <h2 class="section-title">African elephant</h2>
      <p class="section-text">
        Deep in the dense, humid forests of West and Central Africa, you can
        find the elusive forest elephant, one of the two members of the
        African elephant species. The actual number of wild African forest
        elephants remains uncertain due to their shy nature, but we do know
        that they are critically endangered species and have declined by an
        estimated 86% over 31 years.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>

  <section class="section">
    <div class="section-content">
      <h2 class="section-title">Sumatran orangutan</h2>
      <p class="section-text">
        The Sumatran orangutan is found exclusively on the island of
        Sumatra, Indonesia. They are listed as critically endangered by the
        IUCN at present, with less than 14,000 individuals in the wild.
        Orangutans need vast tracts of connecting forest to live in but
        these great apes lost 60% of their forest habitat.
      </p>
    </div>
    <div class="section-image">
      <div class="image"></div>
    </div>
  </section>
</div>

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700;900&family=Righteous&family=Open+Sans:ital,wght@0,500;0,600;1,400&display=swap');

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

html {
  scroll-behavior: smooth;
}

body {
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  background-color: #1B1A14;
}

.section {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 80px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  scroll-snap-align: start;
}

.section:nth-child(2n) {
  flex-direction: row;
}

.section-title {
  font-family: 'Dancing Script';
  font-size: 54px;
  font-weight: 900;
  margin-bottom: 32px;
  color: #86af2f;
}

.section-content {
  width: 30%;
}

.section-image {
  position: relative;
  width: 600px;
  height: 430px;
  perspective: 1000px;
  transition: .8s ease-in-out;
}

.image {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
  transform: perspective(5000px) rotateY(-12deg) rotateX(-12deg);
  transition: transform .8s ease-in-out, filter 3s;
  transition-delay: .1s;
  background-size: cover;
  overflow: hidden;
}

.image::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background-size: cover;
  filter: grayscale(1);
}

.section:nth-child(2n) .image {
  transform: perspective(5000px) rotateY(12deg) rotateX(-12deg);
}

.anim .image {
  transform: perspective(5000px) rotateY(12deg) rotateX(-12deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.anim .image::after {
  animation: anim 2s forwards;
}

@keyframes anim {
  from {
    height: 100%;;
  }

  to {
    height: 0%;;
  }
}

.section:nth-child(2n).anim .image {
  transform: perspective(5000px) rotateY(-12deg) rotateX(-12deg);
}

.section:nth-child(1) .image,
.section:nth-child(1) .image::after {
  background-image: url("https://i.ibb.co/HBCwckH/rhino.jpg");
}

.section:nth-child(2) .image,
.section:nth-child(2) .image::after {
  background-image: url("https://i.ibb.co/c3DdJFb/leopard.jpg");
}

.section:nth-child(3) .image,
.section:nth-child(3) .image::after {
  background-image: url("https://i.ibb.co/zJh4y62/gorilla.jpg");
}

.section:nth-child(4) .image,
.section:nth-child(4) .image::after {
  background-image: url("https://i.ibb.co/bmNCvf0/tiger.jpg");
}

.section:nth-child(5) .image,
.section:nth-child(5) .image::after {
  background-image: url("https://i.ibb.co/9YSwkyr/elephant.jpg");
}

.section:nth-child(6) .image,
.section:nth-child(6) .image::after {
  background-image: url("https://i.ibb.co/ZfYqJk7/orangutan.jpg");
}

const targets = document.querySelectorAll(".section");
const threshold = 0.5;

const setAnim = (entries, observer) => {
  entries.forEach((entry) => {
    const elem = entry.target;
    if (entry.isIntersecting) {
      elem.classList.add('anim');
    } else {
      elem.classList.remove('anim');
    }
  });
}

const observer = new IntersectionObserver(setAnim, { threshold });
for (const target of targets) {
  observer.observe(target);
}

This Pen is owned by Irina on CodePen.

See more by @irinainina on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.