Créer une vidéo d’un site web : comment le faire défiler automatiquement

Ouvrez la page, ouvrez les DevTools (F12, ou ⌥ ⌘ I sur Mac), collez ceci dans la Console et appuyez sur Entrée. Le script attend trois secondes pour vous laisser lancer votre enregistreur, puis fait défiler la page de haut en bas sur une courbe ease-in-out, pendant la durée que vous avez fixée.

const SECONDS = 20;        // durée du défilement
const WAIT = 3;            // temps pour lancer votre enregistreur

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' compte. Beaucoup de sites définissent scroll-behavior: smooth, ce qui transforme chacun des petits déplacements du script en animation à part entière et ramène aussitôt les saccades.
• requestAnimationFrame déplace la page une fois par image affichée, donc le défilement est aussi régulier que l’écran le permet.
• Faites défiler une fois jusqu’en bas puis remontez à la main avant de le lancer, pour que les images chargées à la demande soient déjà en place et que la hauteur de la page ne change pas en cours de prise.
• Les sites construits sur une bibliothèque de défilement fluide comme Lenis ou Locomotive Scroll gèrent eux-mêmes le défilement et peuvent contrarier le script. Si la page fait des embardées, c’est pour cela.

Avec un script, la fréquence d’images dépend encore de votre enregistreur et de votre machine. Un moteur de rendu supprime les deux : Website Scroll Video lit toute la page une fois, puis calcule où elle doit se trouver à chaque image d’une vidéo à 24, 30 ou 60 fps fixes, si bien qu’une page lourde ne peut pas perdre d’images et qu’une page longue ne peut pas dériver. Vous réglez les mêmes choses que dans le script, en secondes et par courbe, et vous regardez l’aperçu avant de dépenser quoi que ce soit.

Mesurez la page en écrans : sa hauteur totale divisée par la hauteur de la fenêtre. Une landing page typique fait cinq à huit écrans. Ensuite :

Plus vite qu’un écran par seconde, le texte se brouille, surtout à 30 fps ou dans un GIF. Au-delà de trois secondes par écran, l’attention décroche. Quand une section compte plus que les autres, une pause dessus vaut mieux que de ralentir toute la page ; Website Scroll Video en permet jusqu’à 6, de 0,5 à 5 secondes chacune.

• Fluide (ease-in-out). Part de l’arrêt, avance à vitesse de croisière, revient à l’arrêt. Le bon choix par défaut : les deux extrémités paraissent voulues plutôt que coupées net.
• Glissé (ease-out). Part vite et glisse jusqu’à l’arrêt, comme un geste rapide sur un trackpad. Bien pour les teasers courts qui doivent démarrer avec énergie.
• Linéaire. Une seule vitesse du début à la fin. Idéal pour une boucle d’arrière-plan, où le moindre changement de rythme attire l’œil.
• Pulsé. Avance d’une section, se pose, repart. On dirait quelqu’un qui feuillette le site, ce qui convient aux visites produit.

Une vidéo qui descend puis revient d’un coup en haut a un saut visible quand elle boucle. Faites plutôt descendre puis remonter la page sur la même courbe : la dernière image correspond à la première et la boucle est invisible. Dans Website Scroll Video, c’est la lecture Aller-retour, avec un temps d’arrêt facultatif en bas avant le retour et en haut avant que la boucle reprenne.