In a previous tutorial, we discovered easy methods to create a grayscale-to-color impact on scroll. To implement it, we took benefit of recent front-end options like CSS Grid, the clip-path property, and the Intersection Observer API.

Immediately, we’ll use these instruments and the information gained from that tutorial to construct one other cool scroll impact. As we scroll, web page components will sequentially seem with a slide animation. It is a frequent scroll impact that you just may see on portfolio web sites.

What We’ll be Constructing

With out additional intro, let’s try what we’ll be constructing:

Observe: Remember to learn the aforementioned tutorial as we’ll seize some code snippets from it.

• 

  How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

  On this new tutorial, we’ll begin with some grayscale photos and discover ways to easily reveal their coloured variants on scroll. To attain the specified…

1. Start With the HTML Markup

We’ll begin with a wrapper part aspect that may comprise nested parts. Every sub-section can have one of many following three attainable layouts:

• A picture on the left, textual content on the precise.
• Massive textual content on the precise.
• Textual content on the left, the picture on the precise.

Right here’s a visible illustration of those layouts:

It’s price noting that for all layouts, we’re going to make use of the identical Pixabay picture. You may do not forget that we’ve already used it in one other scroll tutorial.

The required markup:

<part class="main-section">
  <part class="grid">
    <determine>
      <img src="IMG_SRC" alt="">
      <figcaption>...</figcaption>
    </determine>
    <p>...</p>
  </part>
  <part class="big-text">
    <p>...</p>
  </part>
  <part class="grid grid-alternate">
    <p>...</p>
    <determine>
      <img src="IMG_SRC" alt="">
      <figcaption>...</figcaption>  
    </determine>
  </part>
</part>

2. Outline the Kinds

Developing subsequent, we’ll write down crucial elements of our types. For this demonstration, we received’t focus on the reset guidelines as they aren’t something vital. So, straight to the purpose:

• We’ll outline the grid, grid-alternate, and big-text courses to seize the totally different layouts. The primary two benefit from CSS Grid, whereas the final one units a most width with margin-left: auto.
• Simply to observe with a brand new CSS operate, we’ll use clamp() to create fluid typography.
• Every determine aspect can have a completely positioned ::earlier than pseudo-element. That aspect will act as a picture overlay and be animated first.
• All animated components will initially be hidden due to the clip-path property. Once more, to actually perceive how this property works, try this tutorial.
• To chain the animations, we’ll cross applicable values to the transition-delay property of every aspect. Be happy to make them dynamic through the use of CSS variables.
• On screens as much as 1000px vast, all components will likely be stacked. Moreover, on picture sections, the picture will at all times come earlier than the textual content.

Listed below are the corresponding types based mostly on these assumptions:

/*CUSTOM VARIABLES HERE*/

physique {
  font: clamp(16px, 2vw, 22px) / 1.7 "Montserrat", sans-serif;
}

.main-section {
  max-width: 1400px;
  padding: 0 30px;
  margin: 120px auto;
}

.main-section part + part {
  margin-top: 120px;
}

.main-section .grid {
  show: grid;
  grid-column-gap: 60px;
  grid-template-columns: 2fr 1fr;
}

.main-section .grid-alternate {
  grid-template-columns: 1fr 2fr;
}

.main-section .big-text {
  max-width: 800px;
  margin-left: auto;
  font-size: clamp(24px, 2vw, 32px);
}

.main-section determine {
  place: relative;
  box-shadow: -1rem 1rem 3rem -2rem rgba(0, 0, 0, 0.5);
}

.main-section determine::earlier than {
  content material: "";
  place: absolute;
  high: 0;
  proper: 0;
  backside: 0;
  left: 0;
  background: var(--blue-sudo);
  transition: clip-path 0.3s;
}

.main-section determine img {
  show: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-section determine figcaption {
  place: absolute;
  high: 20px;
  proper: 20px;
  padding: 10px;
  font-weight: daring;
  text-transform: uppercase;
  coloration: var(--white);
  background: var(--blue);
  mix-blend-mode: overlay;
  transition: clip-path 0.3s 0.9s;
}

.main-section determine::earlier than,
.main-section determine figcaption {
  clip-path: inset(0 0 0 100%);
}

@media (max-width: 1000px) {
  .main-section {
    margin: 60px auto;
  }
  
  .main-section part + part {
    margin-top: 60px;
  }

  .main-section .grid {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
  
  .main-section .grid-alternate determine {
    order: -1;
  }
}

3. Animate on Scroll

As we scroll, we’ll animate solely the picture sections (i.e. those who have the grid class). Extra particularly, we’ll animate the next components with this order:

• The ::earlier than pseudo-element of the determine aspect (the one with the darkish background).
• The picture.
• The picture caption.

When at the very least 50% of every determine aspect enters the viewport, it’ll obtain the is-animated class. In any other case, it’ll lose this class and turn into hidden.

So when the half a part of a determine is throughout the viewport, the related little one components will seem sequentially from totally different instructions. First, the ::earlier than pseudo-element will seem from the precise, then the picture from the left, and at last its caption from the precise.

The JavaScript code that we’re going to want is taken from the grayscale-to-color impact tutorial. We simply must match totally different components:

const targets = doc.querySelectorAll(".main-section .grid determine");
const isAnimated = "is-animated";
const threshold = 0.5;

operate callback(entries, observer) {
  entries.forEach((entry) => {
    const elem = entry.goal;
    if (entry.intersectionRatio >= threshold) {
      elem.classList.add(isAnimated);
      //observer.unobserve(elem);
    } else {
      elem.classList.take away(isAnimated);
    }
  });
}

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

Listed below are the related CSS guidelines that create the sequence of animations:

.main-section determine::earlier than {
  transition: clip-path 0.3s;
}

.main-section determine img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-section determine figcaption {
  transition: clip-path 0.3s 0.9s;
}

.main-section determine::earlier than,
.main-section determine figcaption {
  clip-path: inset(0 0 0 100%);
}

.main-section determine.is-animated::earlier than,
.main-section determine.is-animated img,
.main-section determine.is-animated figcaption {
  clip-path: inset(0);
}

Observe: As an alternative of the clip-path property, we may equally have used rework to perform the identical impact. Take a look at the third instance of this tutorial for more information.

Conclusion

That’s it, of us! Immediately we went via a manner for sequentially revealing components on scroll by profiting from superb new front-end instruments. Most significantly, we constructed this impact with out utilizing any libraries.

Hopefully you’ll be capable of enrich your pages with an identical impact.

As a facet word, earlier than deciding to make use of these options on a challenge that requires help for older browsers, test the browser help at caniuse.com.

Right here’s a reminder of what we constructed:

You probably have ever used the clip-path property to construct one thing useful, tell us! As at all times, thanks so much for studying!