Comment construire une page web immersive où une vidéo est synchronisée avec le défilement vertical de la page. Le contenu textuel apparaît progressivement sur la vidéo, offrant une narration fluide et engageante.

Principe de fonctionnement

L’idée centrale est de lier la progression de la vidéo à la position de la barre de défilement (scroll) dans la page.
Au fur et à mesure que l’utilisateur descend, la vidéo avance dans le temps, créant un effet d’animation pilotée par le scroll.

Exemple : https://bilal.projets-en-cours.net/skrollr/index-opt.html

Étapes clés

1. Préparer la vidéo

• La vidéo doit être chargée en mode preload="auto", en sourdine (muted) et avec l’attribut playsinline pour un comportement fluide sur mobile.
• L’élément <video> est fixé en position fixed afin qu’il reste visible à l’écran pendant tout le défilement.

2. Adapter la hauteur du scroll

• On crée un élément invisible avec une hauteur calculée en fonction de la durée de la vidéo multipliée par une constante qui définit la vitesse de défilement (ex : 1000 pixels par seconde vidéo).
• Cette hauteur permet d’activer le scroll sur la page.

3. Synchroniser la vidéo avec le scroll

• Lors du scroll, on calcule un temps cible en divisant la position verticale du scroll par la constante de vitesse.
• On met à jour la propriété currentTime de la vidéo avec ce temps cible, ce qui fait avancer la vidéo en fonction du défilement.
• Pour éviter les mises à jour trop fréquentes et améliorer la fluidité, on utilise requestAnimationFrame.

4. Afficher du texte superposé

• Plusieurs blocs de texte sont positionnés en fixed sur l’écran.
• Chaque bloc a une plage temporelle (start, end) durant laquelle il est visible.
• On ajuste dynamiquement l’opacité et la position (animation d’apparition/disparition) des textes en fonction du temps vidéo courant.

const playbackConst = 1000; // pixels par seconde vidéo
const setHeight = document.getElementById("set-height");
const vid = document.getElementById("v0");

vid.addEventListener("loadedmetadata", () => {
  setHeight.style.height = vid.duration * playbackConst + "px";
});

let lastScrollY = 0;
let ticking = false;

function update() {
  let time = lastScrollY / playbackConst;
  time = Math.min(Math.max(time, 0), vid.duration);
  vid.currentTime = time;
  ticking = false;
}

window.addEventListener("scroll", () => {
  lastScrollY = window.pageYOffset;
  if (!ticking) {
    requestAnimationFrame(update);
    ticking = true;
  }
});

Bonnes pratiques et optimisations

• Limiter la fréquence des mises à jour grâce à requestAnimationFrame pour éviter des ralentissements.
• Ajouter des transitions douces sur l’opacité et la position des textes pour une expérience agréable.
• Prévoir des textes courts et impactants, adaptés au rythme de la vidéo.
• Tester sur mobile en s’assurant que la vidéo est en mode playsinline et muette pour éviter les blocages.

Conclusion

Technique qui combine vidéo et scroll pour offrir une narration immersive et interactive. Elle est idéale pour les storytelling digitaux, les présentations produits ou les expériences de marque innovantes.