Focus gallery

Ce qui est inclus

Une galerie verticale dont l’image centrée passe en avant : elle grandit d’une fois et demie et retrouve sa pleine opacité, pendant que les autres reculent à 0,7 et s’estompent. Le mouvement n’est pas une animation lancée à la main, c’est le défilement lui-même.

Deux fichiers, plus vos images : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe. Les six photographies livrées ont été générées pour ce dossier et sont libres de droit — rien à télécharger, rien à créditer.

Le plus surprenant est ce que le script ne fait pas. La course de défilement, le centrage de chaque image et le parcours au clavier sont écrits en CSS, dans une seule déclaration de rembourrage. Le script ne décide que d’une chose : laquelle des images est au centre.

Fonctionnalités

• Le défilement fait tout — une demi-vue de rembourrage en haut et en bas, et la première image est déjà centrée à l’arrêt, la dernière en fin de course. Pas un calcul de hauteur en JavaScript.
• Clic et clavier — cliquer une image la ramène au centre ; les flèches, Origine et Fin font la même chose, et le focus entraîne toujours l’image avec lui.
• Marche sans JavaScript — la mise en page tient entière, et le défilement se cale de lui-même sur chaque image avec scroll-snap.
• Une variable pour l’échelle — image, arrondi, écarts, ombres et textes dérivent tous du même corps de référence, et suivent ensemble.
• Un événement pour s’y brancher — focus-gallery:change donne le rang de l’image centrée, de quoi afficher une légende ou un compteur.
• Nombre d’images libre — six, trois ou quarante : ni le CSS ni le script n’en connaissent le compte.

Le poser dans une page

Deux fichiers à charger, puis une liste d’images :

<link rel="stylesheet" href="focus-gallery.css">
<script src="focus-gallery.js" defer></script>

<section class="focus-gallery" aria-labelledby="galerie-titre">
  <h2 class="focus-gallery__titre" id="galerie-titre">Le fil des images</h2>
  <p class="focus-gallery__note">Menée par le défilement</p>

  <div class="focus-gallery__vue">
    <ol class="focus-gallery__rail">
      <li class="focus-gallery__cellule">
        <button type="button" class="focus-gallery__cadre">
          <img class="focus-gallery__image" src="images/balloon.webp"
               width="900" height="600"
               alt="Une montgolfière rayée au-dessus d’une vallée de brume">
        </button>
      </li>
      <!-- autant de <li> que d’images -->
    </ol>
  </div>
</section>

Le script s’installe seul, y compris sur une galerie insérée après le chargement. La hauteur se règle par la variable --fg-hauteur et non par height : c’est elle qui commande aussi la course.

Ce qu’il faut savoir

• La galerie prend le défilement pendant sa hauteur. C’est le principe : la molette la traverse image par image, puis rend la main à la page toute seule. Sur une page qui en poserait deux à la suite, laissez-leur de l’air.
• La barre de défilement est masquée. Elle l’est aussi sur le modèle d’origine, et c’est le prix de la composition : rien n’indique visuellement qu’il y a d’autres images. La première voisine, elle, dépasse toujours assez pour le dire.
• Les deux textes ne sont pas sélectionnables. Ils sont posés par-dessus la zone de défilement ; sans pointer-events: none, la molette passée sur eux ne ferait rien défiler.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML — vérifié en le servant en HTTP avec l’en-tête, pas supposé.
• Le dessin vient d’ailleurs. Les proportions, les deux échelles, les ombres et la loi de mouvement reprennent celles d’un composant Framer commercial, relevées sur la page publiée. Le code, les images et les textes sont originaux : rien n’a été repris de son implémentation.