L'effet de défilement façon Apple avec Claude

Outils: Claude, GSAP ScrollTrigger, ffmpeg
Prix: Gratuit (licence GSAP sans frais)
Temps: 30 min
Niveau: Intermédiaire

Sur une page d'accueil, cet effet sert à montrer un produit sous plusieurs angles, une machine qui s'assemble ou un avant-après, sans que le visiteur ait à cliquer sur « lecture ». Il convient à un artisan, une marque de produits, un logiciel qui veut montrer son interface. Le principe tient en trois idées :

la section qui contient la vidéo est épinglée (elle reste à l'écran pendant qu'on fait défiler) ;
la position de défilement est convertie en temps de lecture, grâce à l'option scrub de ScrollTrigger ;
la vidéo est encodée pour pouvoir sauter instantanément à n'importe quelle image.

1. Préparer la vidéo

Choisir un plan courtTrois à huit secondes suffisent, sans son. Plus la vidéo est longue, plus le fichier est lourd à charger.
Encoder une image clé par imageUne vidéo classique ne stocke qu'une image complète de temps en temps, ce qui rend les sauts saccadés. L'option -g 1 de ffmpeg (installable avec brew install ffmpeg) rend chaque image autonome. Le fichier est plus gros : réduisez la taille à 1 280 pixels de large.
Terminal
```
ffmpeg -i ma-video.mov -vf scale=1280:-2 -an -c:v libx264 -pix_fmt yuv420p -g 1 -movflags +faststart video.mp4
```

2. Le prompt à donner à Claude

Il précise la bibliothèque, la version exacte et les cas que Claude doit prévoir (voir les pièges plus bas).

Prompt

Écris une page HTML autonome (un seul fichier, CSS et JS inclus) pour la page d'accueil de [votre entreprise].
Structure : une intro plein écran avec le titre "[votre titre]", puis une section plein écran avec la vidéo "video.mp4" (muted, playsinline, preload="auto"), puis une section de suite.

Effet : quand on fait défiler, la section vidéo reste épinglée et la vidéo avance de 0 à sa durée totale au rythme du défilement, sur une distance de 3 écrans. Vers 70 % du parcours, le texte "[votre phrase]" apparaît en fondu par-dessus la vidéo.

Contraintes techniques :
- GSAP 3.15.0 et ScrollTrigger chargés depuis cdn.jsdelivr.net/npm, rien d'autre.
- ScrollTrigger avec pin, start "top top", end "+=300%", scrub 0.5.
- Anime video.currentTime de 0 à video.duration avec ease "none".
- Démarre l'animation seulement quand la durée de la vidéo est connue (readyState >= 1, sinon événement loadedmetadata).
- Si prefers-reduced-motion est activé : pas d'animation, une image fixe de la vidéo et le texte visible.
- Mise en page lisible sur mobile (390 px de large), sans défilement horizontal.
Commente le code en français, simplement.

3. Le résultat attendu, testé

Voici un fichier complet du type de celui que vous devez obtenir. Il a été testé dans Chromium, sur ordinateur et en largeur mobile : la vidéo passe de 0 à 5 secondes au fil du défilement et le titre apparaît à la fin. Enregistrez-le sous index.html à côté de video.mp4 et ouvrez-le d'un double-clic.

HTML

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Défilement vidéo</title>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #0b0b0c; color: #f5f5f7; }
  .intro, .suite { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 0 16px; }
  .scene { height: 100vh; position: relative; overflow: hidden; }
  .scene video { width: 100%; height: 100%; object-fit: cover; }
  .scene h2 { position: absolute; left: 0; right: 0; bottom: 10%; margin: 0; text-align: center; font-size: clamp(1.5rem, 5vw, 3.5rem); opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .scene h2 { opacity: 1; } }
</style>
</head>
<body>
  <section class="intro"><h1>Faites défiler</h1></section>
  <section class="scene">
    <video id="film" src="video.mp4" muted playsinline preload="auto"></video>
    <h2 id="titre">Votre produit, sous tous les angles</h2>
  </section>
  <section class="suite"><p>La suite de la page</p></section>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
  <script>
    gsap.registerPlugin(ScrollTrigger);
    const video = document.getElementById("film");
    const reduit = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    function lancer() {
      if (reduit) { video.currentTime = video.duration / 2; return; }
      const tl = gsap.timeline({
        scrollTrigger: { trigger: ".scene", start: "top top", end: "+=300%", scrub: 0.5, pin: true }
      });
      tl.to(video, { currentTime: video.duration, ease: "none", duration: 1 }, 0)
        .to("#titre", { opacity: 1, duration: 0.2 }, 0.7);
    }
    if (video.readyState >= 1) lancer();
    else video.addEventListener("loadedmetadata", lancer, { once: true });
  </script>
</body>
</html>

Les pièges à éviter

Une vidéo saccadée. Si elle n'est pas encodée avec -g 1, le navigateur doit reconstruire chaque image à partir de la dernière image complète, et l'effet accroche.
Une durée inconnue. Si le script démarre avant que le navigateur connaisse la durée de la vidéo, l'animation n'a pas de point d'arrivée. D'où la condition sur readyState dans le prompt.
Tester avec un serveur trop simple. Pour sauter dans une vidéo, le navigateur demande des morceaux du fichier (« requêtes partielles »). Le petit serveur python3 -m http.server ne les gère pas et la vidéo reste bloquée sur la première image. Ouvrez le fichier directement, ou testez sur votre vrai hébergeur.

Ce qu'il faut savoir

Sur certains téléphones, les sauts dans une vidéo restent moins fluides que sur ordinateur. L'autre méthode, plus lourde à préparer, consiste à exporter la vidéo en une suite d'images dessinées dans un canvas : demandez-la à Claude si le rendu mobile ne vous suffit pas.
Une vidéo encodée avec -g 1 pèse plus lourd. Gardez-la courte et vérifiez le temps de chargement sur une connexion mobile.
Pensez aux visiteurs qui désactivent les animations : le prompt prévoit le réglage prefers-reduced-motion du système.
GSAP et ses extensions sont gratuits, y compris pour un site commercial, selon leur page de licence.

À vérifier. Relisez le code rendu par Claude avant de le mettre en ligne, chargez les scripts seulement depuis un CDN connu et fixez la version (ici 3.15.0) pour qu'une mise à jour ne casse pas votre page. N'utilisez que des vidéos dont vous avez les droits.

Sources

Documentation officielle de GSAP ScrollTrigger (pin, start, end, scrub)
Licence GSAP (usage commercial sans frais)
Documentation ffmpeg, options des encodeurs (option g)
MDN, prefers-reduced-motion

Vous voulez une page d'accueil qui montre vraiment votre produit ? C'est ce que je construis dans mes sites web.

Une vidéo qui avance au défilement, avec un prompt Claude