Video Tutorial Scrolling Appearance

For this exercise I propose to discover how to create a scrolling appearance effect.

Operation

To achieve this appearance effect we will add a class when the element will become visible in the page. To detect when the element enters the display area one can rest on the intersection API observe.

const threshold = .1
const options = {
  root: null,
  rootMargin: '0px',
  threshold
}

const handleIntersect = function (entries, observe) {
  entries.forEach (function (entry) {
    if (entry.intersectionRatio> threshold) {
      entry.target.classList.remove ( 'reveal')
      observer.unobserve (entry.target)
    }
  })
}

document.documentElement.classList.add ( 'reveal-loaded')

window.addEventListener ("DOMContentLoaded", function () {
  const observe = new IntersectionObserver (handleIntersect, options)
  const targets = document.querySelectorAll ('. reveal')
  targets.forEach (function (target) {
    observer.observe (target)
  })
})

We then use CSS to manage the appearance animation.

.reveal-loaded .reveal (class * = "reveal-") {
    opacity: 0;
    transform: translateY (30px);
}

.reveal-loaded (class * = "reveal") {
    transition: 1s cubic-bezier (.5, 0, 0, 1);
}

/ * We add delay * /
.reveal-loaded .reveal-2 {
    transition-delay: .1s;
}

.reveal-loaded .reveal-3 {
    transition-delay: .2s;
}

.reveal-loaded .reveal-4 {
    transition-delay: .3s;
}

To avoid the blinking effect (content that appears for a short time when the page is loaded) you can put the script in the header of your page.