Scroll photo band

Ce qui est inclus

Une section « à propos » qui s’épingle en haut de la fenêtre pendant que cinq tirages photo entrent par la droite, l’un après l’autre, et se posent de travers. Deux fichiers, une feuille de style et un script — plus les polices et les cinq photographies, en local dans le dossier. Aucune dépendance, aucune étape de build, aucune requête externe.

Le composant ne prend le défilement que le temps de son animation : la course, --spb-course, vaut 160 vh et le rail ne fait rien de plus. Une fois le dernier tirage posé, la page reprend son cours.

Fonctionnalités

• Mené par le défilement, avec de l’inertie — la bande suit le doigt en rejoignant sa cible en exponentielle ; data-smoothing règle le retard, de 0 à 99.
• Marche sans JavaScript — les cinq tirages sont alors déjà en place, chacun avec son inclinaison. Rien n’est caché, rien n’attend un script.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : titre, tirages, marges, bouton et distances d’entrée suivent ensemble.
• Sept paliers responsives — ceux du dessin d’origine, aux mêmes points de rupture, du tirage de 450 px sur grand écran à celui de 80 px sur téléphone.
• Mouvement réduit respecté — plus de course, plus d’épinglage, plus d’entrée. Les inclinaisons restent : c’est un dessin, pas un mouvement.
• Le libellé du bouton monte au survol — et au focus clavier, avec une seule des deux copies lue à voix haute.

Le poser dans une page

Deux fichiers à charger, puis quatre niveaux de balisage :

<link rel="stylesheet" href="scroll-photo-band.css">
<script src="scroll-photo-band.js" defer></script>

<section class="scroll-photo-band" data-scroll-photo-band>
  <div class="scroll-photo-band__rail">
    <div class="scroll-photo-band__stage">
      <div class="scroll-photo-band__inner">
        …l’en-tête, la bande de cinq <li>, le texte…
      </div>
    </div>
  </div>
</section>

Les quatre niveaux ne sont pas décoratifs : le rail donne la course, le stage s’épingle et rogne ce qui dépasse, l’inner porte les marges. Le balisage complet est dans le README et dans la démo.

Ce qu’il faut savoir

• La bande est plus large que la fenêtre, et c’est voulu. Cinq tirages jointifs et centrés débordent des deux côtés dès 1440 px. Le bloc épinglé les rogne lui-même : rien ne sort, la page ne défile pas latéralement, mesuré de 320 à 1600 px.
• Le défilement lui appartient un moment. La section retient la page pendant 160 vh. C’est ce qui fait l’effet, mais c’est à savoir avant de l’empiler avec un autre composant collant.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML : le script écrit ses positions par le CSSOM, que la politique autorise.
• Le dessin vient d’ailleurs. Les proportions et la loi de l’animation sont celles d’une section d’un gabarit Webflow commercial, relevées sur le site en ligne et dans les données de son moteur d’interactions. Le code, lui, est original. Quatre défauts du modèle ont été corrigés au passage — le README les chiffre et dit comment les rétablir.