Sauter les bases, je connais PHP
La base
Le JavaScript côté navigateur
Les librairies incontournables
Pour aller plus loin
Cas Pratiques (ES2015)

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);
  }
}