TP : Apparition au défilement — Formation Apprendre le JavaScript

Pour cet exercice je vous propose de découvrir comment créer un effet d'apparition au défilement.

Le fonctionnement

Pour réaliser cet effet d'apparition on ajoutera une classe lorsque l'élément deviendra visible dans la page. Pour détecter quand l'élément rentre dans la zone d'affichage on peut se reposer sur l'API intersection observer.

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

const handleIntersect = function (entries, observer) {
  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 observer = new IntersectionObserver(handleIntersect, options)
  const targets = document.querySelectorAll('.reveal')
  targets.forEach(function (target) {
    observer.observe(target)
  })
})

On utilise ensuite du CSS pour gérer l'animation d'apparition.

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

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

/* On ajoute du délai */
.reveal-loaded .reveal-2 {
    transition-delay: .1s;
}

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

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

Pour éviter l'effet de clignotement (contenu qui apparait pendant un bref délai au chargement de la page) vous pouvez mettre le script dans l'en tête <head> de votre page.

Vous pouvez aussi utiliser des animations plutôt que les transitions

.reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0!important;
  animation: none!important;
  transition: 0s!important;
}

.reveal-loaded [class*="reveal-"]{
  animation: revealAnimation 1s cubic-bezier(.5, 0, 0, 1) both;
}

.reveal-loaded .reveal-2 {
  animation-delay: .1s;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .reveal-loaded  [class*="reveal-"] {
    animation: none!important;
  }
}

@keyframes revealAnimation {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

Publié

Technologies utilisées

JavaScript