<section class="hero-section vh-100">
  <div>
    <h1>Grayscale to Color Effect</h1>
    <p>šŸ‘‡ Scroll down</p>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/mark_mook_fotografie-3466195" target="_blank">Mark Mook</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
    <div class="colored cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/bessi-909086" target="_blank">Besi</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
    <div class="colored cover" data-animation="to-left" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/nastya_gepp-3773230" target="_blank">Anastasia Gepp</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
    <div class="colored cover" data-animation="to-bottom" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/doanme-4958892" target="_blank">Doris Metternich</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
    <div class="colored cover" data-animation="to-top" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
  </div>
</section>
<footer class="page-footer">
  <p>
    <small>Images from <a href="http://pixabay.com/" target="_blank">Pixabay</a>
    </small>
  </p>
  <p>
    <small>Made with <span>ā¤</span> by <a href="https://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
    </small>
  </p>
</footer>
/* RESET RULES & HELPER CLASSES
ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ */
:root {
  --blue: #0a0c10;
  --gray: #ededed;
  --white: white;
  --red: red;
}

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

a {
  text-decoration: none;
  color: inherit;
}

body {
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
}

.cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vh-100 {
  height: 100vh;
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section p {
  margin-top: 5px;
}

.hero-section,
.page-footer {
  color: var(--white);
  background: var(--blue);
}

.section h2 {
  font-size: 2.5rem;
  padding: 10vh;
}

.section h2 a {
  box-shadow: inset 0 -5px 0 var(--blue);
  transition: all 0.15s;
}

.section h2 a:hover {
  color: var(--white);
  box-shadow: inset 0 -45px 0 var(--blue);
}

.img-wrapper {
  display: grid;
}

.img-wrapper div {
  grid-column: 1;
  grid-row: 1;
}


/* CLIP-PATH STYLES
ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ */
.grayscale {
  filter: grayscale(1);
  background-color: var(--gray);
}

.colored {
  clip-path: inset(0 100% 0 0);
  transition: all 1.5s ease-in-out;
}

.colored[data-animation="to-left"] {
  clip-path: inset(0 0 0 100%);
}

.colored[data-animation="to-top"] {
  clip-path: inset(0 0 100% 0);
}

.colored[data-animation="to-bottom"] {
  clip-path: inset(100% 0 0 0);
}

.colored.is-animated {
  clip-path: inset(0);
}


/* FOOTER
ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ā€“ */
.page-footer {
  font-size: 18px;
  padding: 10vh;
}

.page-footer p + p {
  margin-top: 5px;
}

.page-footer span {
  color: var(--red);
}
const targets = document.querySelectorAll(".colored");
const isAnimated = "is-animated";
const threshold = 0.5;

function callback(entries, observer) {
  entries.forEach((entry) => {
    const elem = entry.target;
    if (entry.intersectionRatio >= threshold) {
      elem.classList.add(isAnimated);
      //observer.unobserve(elem);
    } else {
      elem.classList.remove(isAnimated);
    }
  });
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.