Comment capturer les animations au défilement et la parallaxe dans une vidéo de site web

Fondus, apparitions, parallaxe et sections épinglées n’existent que lorsque la page défile vraiment. Comment les capturer dans une vidéo, et pourquoi la plupart des outils de capture pleine page les manquent.

Aviral LakhanpaulMis à jour le 30 octobre 20263 min de lecture

La réponse courte

Les animations au défilement ne se jouent que pendant que la page défile vraiment : un outil qui fait défiler une seule capture pleine page ne peut pas les montrer. Enregistrez l’écran pendant qu’un script fait défiler la page, ou utilisez un moteur de rendu qui capture la page en direct à chaque position de défilement, comme le moteur Capture en direct de Website Scroll Video. Pour un résultat plus rapide, sans le mouvement, amenez les animations d’entrée à leur état final avant la capture.

Pourquoi les animations disparaissent

La plupart des outils qui transforment une URL en vidéo procèdent en deux temps : ils prennent une seule capture d’écran très haute de la page, puis font descendre un cadre dessus. C’est rapide et parfaitement fluide, mais la capture ne fixe qu’un instant. Tout ce qui dépend de la position de défilement, comme un titre qui apparaît en fondu en entrant dans le champ, une image en parallaxe, une section qui reste épinglée et change pendant le défilement, ou un compteur qui défile, reste figé dans l’état où il était à cet instant.

Selon la façon dont la page a été construite, cet état est l’un des trois suivants :

Terminé, ce qui rend bien mais reste statique.
Pas commencé, ce qui laisse des trous vides à la place des sections, parce que les éléments qui attendent d’apparaître sont encore invisibles.
À mi-chemin, saisi en plein fondu ou en plein glissement, ce qui a l’air cassé.

Vos options

Façons de capturer les animations au défilement
Approche	Animations	Défilement	Vitesse
Défiler sur une image fixe, entrées stabilisées	Montrées dans leur état final	Calculé, parfaitement régulier	Rapide
Capture en direct à chaque position de défilement	Se jouent comme un visiteur les voit	Calculé, calé sur la fréquence d’images	Nettement plus lente
Enregistrement d’écran avec un script de défilement	Se jouent en temps réel	Aussi régulier que votre machine le permet	Temps réel, plus le montage

La voie rapide : les stabiliser d’abord

Si les animations ne sont que des entrées, des fondus et des glissements qui mettent le contenu en place, la page a généralement l’air juste dans son état final. Dans Website Scroll Video, c’est l’option « Stabiliser les animations », utilisée avec le moteur rapide Panoramique statique. Les animations d’entrée sont menées à leur terme avant la lecture de la page : rien n’est saisi invisible ou à mi-chemin, et le défilement est aussi fluide et aussi rapide à rendre que n’importe quel autre.

La voie fidèle : la capture en direct

Quand le mouvement est l’essentiel, comme sur la plupart des templates Framer et Webflow, des sites d’agence et des lancements de produit, passez le moteur en Capture en direct. Au lieu de faire défiler une seule image, elle fait défiler un vrai navigateur jusqu’à chaque position et y prend une capture : apparitions, parallaxe, sections épinglées et transformations liées au défilement se jouent dans la vidéo exactement comme sur la page.

Le défilement reste calculé : il est aussi régulier qu’avec le Panoramique statique et tient 24, 30 ou 60 fps fixes.
Les pauses, les survols, les cadres et les fonds fonctionnent tous avec elle, exactement comme avec le Panoramique statique.
Elle mobilise un vrai navigateur pendant toute la durée de la vidéo : c’est pourquoi son rendu est nettement plus lent et qu’elle ajoute 13 crédits à un export. Elle est disponible sur tous les comptes dès le premier export, sans offre à débloquer.

L’enregistrer vous-même

Pour une page qu’un moteur de rendu ne peut pas atteindre, enregistrez l’écran pendant qu’un script la fait défiler. Le guide du défilement automatique fournit le script. Deux points de vigilance :

Les sites qui utilisent une bibliothèque de défilement fluide, comme Lenis ou Locomotive Scroll, pilotent souvent leurs animations depuis la bibliothèque plutôt que depuis le défilement du navigateur. Un script qui appelle window.scrollTo peut passer par-dessus. Faites défiler comme le site l’attend, ou enregistrez avec la bibliothèque désactivée en acceptant la différence.
Les pages chargées d’animations sont justement celles qui risquent le plus de perdre des images pendant l’enregistrement. Fermez tout le reste, enregistrez à 60 fps, et consultez corriger les saccades dans les enregistrements de défilement si la prise saccade encore.

Essayez avec votre propre site

Collez un lien et prévisualisez le défilement gratuitement. 51 crédits offerts à l’inscription, sans carte bancaire, et aucun filigrane sur ce que vous exportez.

Vos questions,
nos réponses

En bref, ce que l’on demande ensuite.

Contact

Pourquoi des sections sont-elles vides dans ma vidéo de défilement de site web ?

Ce sont des éléments qui attendaient une entrée déclenchée au défilement qui ne s’est jamais produite, parce que l’outil a capturé une image fixe de la page. Stabilisez les animations avant la capture, ou utilisez un moteur de capture en direct qui fait défiler la vraie page.

Peut-on enregistrer des effets de défilement en parallaxe ?

Oui, avec une méthode qui fait vraiment défiler la page : un enregistrement d’écran piloté par un script, ou un moteur de rendu qui capture à chaque position de défilement, comme la Capture en direct de Website Scroll Video.

La Capture en direct coûte-t-elle plus cher ?

Elle ajoute 13 crédits à un export, parce qu’elle garde un vrai navigateur ouvert pendant toute la durée de la vidéo. Le reste du prix ne change pas.

Moins de temps à filmer. Plus de temps à créer.

Automatisez vos enregistrements de sites avec un mouvement personnalisable, des réglages intelligents et des options d’export pensées pour les créateurs d’aujourd’hui.

Essayer maintenant