Créer une page produit animée au défilement (scroll vidéo)

Une page produit au défilement est un site d’une seule page où une vidéo ou une animation du produit avance lorsque le visiteur fait défiler la page vers le bas et recule lorsqu’il remonte. La méthode la plus courante découpe la vidéo en images individuelles et dessine la bonne image dans un élément canvas en fonction de la position de défilement.

Cet article explique d’où vient la technique, trois façons de la mettre en œuvre, les règles de performance et d’accessibilité, les erreurs courantes, et comment Yeşilçam Studios construit ce type de page à partir d’une vidéo de montage.

Qu’est-ce qu’une page produit au défilement ?

Sur une page produit classique, une vidéo démarre avec un bouton de lecture et avance à son propre rythme. Sur une page au défilement, c’est le visiteur qui maîtrise le temps : la barre de défilement est reliée à la timeline de la vidéo. Quand le visiteur s’arrête, l’image s’arrête ; quand il remonte, le produit revient en arrière. Ce sentiment de contrôle l’invite à étudier les pièces, les couches ou la rotation du produit.

La technique s’est répandue à la fin des années 2010 grâce aux pages de lancement des grandes marques technologiques. Des pages où des écouteurs se démontaient ou un téléphone pivotait au fil du défilement sont vite devenues un langage reconnaissable du marketing produit. Aujourd’hui, la même approche est utilisée sur les pages d’atterrissage de petites marques aussi.

Quelles méthodes utiliser pour une animation au défilement ?

Méthode	Principe	Point fort	Point faible
Séquence d’images et canvas	La vidéo est découpée en images ; l’image correspondante est dessinée dans un canvas selon la progression du défilement	Précise à l’image près et identique dans tous les navigateurs	Beaucoup de fichiers à télécharger
Positionnement dans la vidéo	La position de lecture d’un fichier vidéo unique suit le défilement	Un seul fichier, poids réduit	Saccade quand on remonte ; peu fluide sans encodage avec des images clés fréquentes
Timelines de défilement CSS	Les animations CSS sont liées directement à la position de défilement	Aucun JavaScript nécessaire, fluide	Anime des propriétés CSS, pas des images de vidéo ; prise en charge inégale selon les navigateurs

Pour lire une vidéo de produit, la séquence d’images est l’option la plus robuste. Les timelines de défilement CSS conviennent aux mouvements d’accompagnement comme les titres, les textes et les transitions de cartes ; dans les navigateurs qui ne les prennent pas en charge, la page doit continuer à fonctionner sous une forme simple.

Quelles sont les composantes d’une page au défilement ?

Scène collante

La zone où se joue l’animation reste fixe à l’écran pendant que le visiteur parcourt une longue section. La hauteur de cette section fixe la « durée » de l’animation : plus la section est haute, plus la lecture est lente.

Séquence d’images

La vidéo est découpée en images compressées, à une résolution adaptée à l’écran. Les formats modernes comme WebP réduisent nettement le poids des fichiers. Servir une séquence plus légère aux appareils mobiles allège encore le chargement.

Couche de texte

Le titre, les caractéristiques, l’histoire et les sections de contact sont écrits en véritable texte HTML. Ainsi, les moteurs de recherche lisent le contenu, les lecteurs d’écran l’annoncent et les visiteurs peuvent le sélectionner.

Affichage de secours

Avant le chargement de la séquence, la première image s’affiche comme image d’affiche, pour que le visiteur ne voie jamais de zone vide.

Comment construire une page produit au défilement étape par étape ?

1. Préparez l’animation source. Choisissez une vidéo de 5 à 20 secondes racontant une seule histoire claire, comme un montage, une rotation du produit ou un mouvement d’ouverture.
2. Découpez la vidéo en images. Entre 24 et 30 images par seconde suffisent dans la plupart des cas ; des vidéos très longues gonflent le nombre de fichiers sans rien apporter.
3. Compressez les images et préparez-les en deux tailles (ordinateur et mobile).
4. Construisez le squelette de la page : un canvas collant, une longue section de défilement autour de lui, et les sections de texte.
5. Convertissez la progression du défilement en numéro d’image et dessinez dans requestAnimationFrame ; ne dessinez pas directement à chaque événement de défilement.
6. Préchargez les images dans l’ordre : d’abord l’image d’ouverture et quelques images intermédiaires, puis le reste. Quand le visiteur atteint une image pas encore chargée, affichez la plus proche déjà chargée.
7. Respectez la préférence de réduction des animations, testez sur mobile et mesurez la vitesse de la page.

Combien d’images faut-il et quel sera le poids de la page ?

Un calcul simple facilite la préparation. Une vidéo de 10 secondes à 24 images par seconde représente 240 images. Si chaque image compressée pèse en moyenne 60 Ko, environ 14 Mo sont téléchargés au total ; non compressées, les mêmes images pèsent plusieurs fois plus. Il existe trois façons de réduire ce poids :

• Moins d’images : dans une animation pilotée par le défilement, 12 à 15 images par seconde paraissent souvent fluides, car c’est le visiteur qui fixe la vitesse.
• Une résolution adaptée à l’écran : n’envoyez jamais d’images au format ordinateur à un appareil mobile.
• Un chargement progressif : téléchargez d’abord des images très espacées, puis celles qui se trouvent entre elles ; l’animation fonctionne tôt sous une forme grossière et devient plus fluide à mesure que le chargement avance.

La hauteur de la section de défilement façonne aussi l’expérience. En règle générale, prévoir une à deux hauteurs d’écran de défilement par seconde d’animation donne un rythme auquel les visiteurs suivent le mouvement confortablement.

À quoi faut-il veiller en matière de performance et d’accessibilité ?

Le plus grand risque d’une page au défilement est son poids. Si des centaines d’images sont téléchargées en haute résolution, la page s’ouvre lentement et consomme les données mobiles. Gardez les images à la résolution que l’écran peut réellement afficher, chargez vite la première image et faites venir le reste progressivement.

Côté accessibilité, la règle de base est de respecter le réglage de réduction des animations du système d’exploitation. La requête CSS prefers-reduced-motion transmet cette préférence ; lorsqu’elle est activée, affichez une image fixe ou une courte série d’images à la place de l’animation. Chez les personnes sensibles au mouvement, les mouvements de grande ampleur peuvent provoquer des vertiges.

• Ne détournez pas le défilement : un code qui modifie la vitesse de défilement ou force la page à s’aimanter sur des sections épuise les utilisateurs.
• Ne placez pas d’information uniquement dans l’animation ; chaque message important doit aussi exister sous forme de texte.
• Prévoyez la navigation au clavier, un focus visible et un contraste de texte suffisant.
• Donnez au canvas une description pertinente ou marquez-le comme décoratif.

Quelles sont les erreurs les plus fréquentes ?

• Lire la vidéo par positionnement direct et obtenir une image qui saccade quand on remonte.
• Laisser les images en pleine résolution et alourdir la page de plusieurs mégaoctets.
• Prévoir une section de défilement trop courte : l’animation défile en un éclair et le visiteur ne voit rien.
• Intégrer le texte dans les images : les moteurs de recherche et les lecteurs d’écran ne peuvent pas le lire.
• Ne pas tester sur mobile : sur un écran vertical, le produit peut sortir du cadre.

Quand une page au défilement est-elle un mauvais choix ?

Tous les produits ne gagnent pas à avoir une page au défilement. Une page produit classique peut mieux fonctionner dans les cas suivants :

• Quand les visiteurs veulent accéder rapidement au prix et à la disponibilité, par exemple dans un catalogue comptant de nombreux produits.
• Quand le produit n’a pas d’histoire visuelle ; pour des produits simples d’une seule pièce, une animation au défilement ne fait qu’ajouter de l’attente.
• Quand une grande partie de l’audience arrive avec des connexions lentes.

Comment mesurer l’efficacité d’une page au défilement ?

Impressionner ne suffit pas à réussir. Suivre ces indicateurs après la mise en ligne montre si la page fonctionne vraiment :

• Profondeur de défilement : la part des visiteurs qui atteignent la fin de l’animation.
• Clics sur l’appel à l’action : la part de ceux qui cliquent sur le bouton qui suit l’animation.
• Temps de chargement du premier contenu visible : la rapidité avec laquelle l’image d’affiche apparaît.
• Mobile ou ordinateur : la même page peut se comporter différemment sur ces deux familles d’appareils.

Comment créer une page produit au défilement dans Yeşilçam Studios ?

Website Studio transforme une vidéo Montage / Démontage réalisée dans Film Studio en site produit d’une page qui se déroule image par image au fil du défilement. Une fois la vidéo réalisée avec une animation de montage / démontage, cliquez sur « Créer un site à partir de cette vidéo » sur la vidéo terminée.

1. Choisissez la vidéo source. Si vous le souhaitez, ajoutez une autre vidéo Montage ou une image comme deuxième scène.
2. Saisissez le nom de la marque, le nom du produit, le titre principal et les textes ; tous les champs sont facultatifs, et Sam complète ce que vous laissez vide avec des textes d’exemple adaptés à votre produit.
3. Indiquez si vous le souhaitez l’adresse de votre site web ; votre page d’accueil et une page intérieure sont lues pour reprendre le nom de la marque, les couleurs, le logo et les textes.
4. Choisissez les sections du menu (Caractéristiques, Histoire, Galerie, FAQ, Contact), la couleur du thème, la langue du site et l’arrière-plan. Si vous choisissez Paysage à l’encre comme arrière-plan, il reste immobile sur les appareils où la réduction des animations est activée.
5. Pour la galerie, utilisez uniquement les images de la vidéo (gratuit) ou générez jusqu’à 8 images.
6. Cliquez sur « Créer le site avec Sam ».

Une fois le site prêt, vous pouvez régler sa visibilité sur « Vous seul » ou « Public », partager le lien d’aperçu ou télécharger le site en ZIP. La modification ultérieure des textes et du thème ainsi que le réempaquetage sont gratuits. Au tarif de référence Basic, la création d’un site coûte 8 751 jetons (0,05 $) et chaque image générée 8 751 jetons (0,05 $) ; la rédaction apparaît séparément dans le devis, et le plan Free applique ×1,3, le plan Pro ×0,8. Le détail figure dans le guide Website Studio et le guide de publication, les prix à jour sur la page des tarifs.

Questions fréquentes

Une page au défilement nuit-elle au référencement ? Non, tant que le texte est en véritable HTML et que la page se charge rapidement. Les problèmes surviennent lorsque le contenu n’existe que dans des images et que la page devient lourde.

Faut-il utiliser une vidéo ou une séquence d’images ? Pour une lecture liée au défilement, une séquence d’images est plus régulière ; un fichier vidéo est plus léger mais peut saccader quand on remonte. Pour des vidéos d’arrière-plan qui se lisent simplement, un fichier vidéo suffit.

Qu’est-ce que prefers-reduced-motion ? C’est une requête média CSS qui indique à une page web que l’utilisateur a demandé à son système d’exploitation de réduire les animations. Lorsqu’elle est activée, les grandes animations sont censées s’arrêter ou se simplifier.

Les pages au défilement fonctionnent-elles sur mobile ? Oui, mais les images doivent être dimensionnées pour les écrans mobiles et la visibilité du produit dans un cadre vertical doit être testée.

Website Studio peut-il créer un site à partir de zéro, sans vidéo ? En octobre 2026, les sites sont créés à partir d’une vidéo Montage / Démontage. La création d’un site à partir d’une simple description est annoncée dans l’application comme disponible bientôt.