Triptych hero

Ce qui est inclus

Un hero éditorial à trois photographies, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — polices, photographies et aquarelles sont dans le dossier, on le copie dans un projet et ça marche.

Les trois plaques dérivent au fil du défilement : les deux latérales s’écartent et s’inclinent, la centrale monte, les photographies s’agrandissent, les deux aquarelles tournent. Tout cela est piloté par un seul nombre, --th-p, que le script fait passer de 0 à 1. La feuille de style s’occupe du reste : il n’y a pas de code JavaScript par élément, et pas de seconde description de la mise en page qui pourrait s’écarter du CSS.

Fonctionnalités

• Marche sans JavaScript — sans le script, --th-p garde sa valeur initiale et la composition s’affiche entière, cadrée, inclinée. Il ne manque que la dérive.
• Un suiveur, pas un saut — le progrès ne colle pas à la molette, il la rattrape avec 360 ms de retard. C’est ce qui donne aux plaques leur glissé plutôt qu’un mouvement collé au doigt.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : titre, filets, marges et plaque suivent ensemble. Le collage, lui, est en pourcentages de la plaque, donc identique à 320 px et à 1600 px.
• Ne déborde jamais sur la page — les plaques sortent du cadre, c’est l’effet même ; le composant rogne sa propre débordée au lieu d’imposer un overflow-x: hidden au site qui l’accueille.
• Mouvement réduit respecté — sous prefers-reduced-motion, le script se débranche et la composition se fige à mi-course. Le dessin reste, le mouvement s’arrête.
• Ne coûte rien hors écran — un IntersectionObserver débranche le suiveur dès que le bloc quitte l’écran ; plusieurs heros sur une page ne coûtent pas plus qu’un seul.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

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

<section class="triptych-hero">
  <span class="triptych-hero__sonde" aria-hidden="true"></span>
  <div class="triptych-hero__contenu">
    <header class="triptych-hero__intro">
      <h1 class="triptych-hero__titre">Votre titre</h1>
      <a class="triptych-hero__lien" href="#">Votre lien</a>
    </header>
    <div class="triptych-hero__scene">
      <div class="triptych-hero__pile">
        <div class="triptych-hero__volet triptych-hero__volet--gauche">
          <img class="triptych-hero__photo" src="…" alt="">
        </div>
        <div class="triptych-hero__volet triptych-hero__volet--droite">…</div>
        <div class="triptych-hero__volet triptych-hero__volet--centre">…</div>
      </div>
    </div>
  </div>
</section>

Rien à appeler : le script s’installe au chargement, et sur les blocs insérés plus tard aussi. Pour changer l’échelle de l’ensemble, une seule ligne suffit — --th-font-size: 22px.

Ce qu’il faut savoir

• Il lui faut une page à traverser. Le progrès se calcule sur la course du bloc à travers la fenêtre : dans une page qui tient tout entière à l’écran, rien ne défile, donc rien ne dérive. Le hero reste alors à son premier keyframe — complet, mais immobile.
• La dérive verticale est en vh. C’est ce que fait l’original, et cela lie le mouvement à la fenêtre. Dans une boîte qui n’est pas la fenêtre — un cadre, une iframe — redéfinissez --th-course avec une longueur à vous ; c’est ce que fait la page d’aperçu.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML : les valeurs passent par le CSSOM, que la CSP autorise là où elle interdit d’injecter une balise <style>.
• Le dessin vient d’ailleurs, les images non. Les proportions et les keyframes reprennent celles d’un gabarit Webflow commercial, relevées sur la page en ligne et dans ses données d’interaction. Le code est original, et les six visuels ont été refaits : ceux d’origine n’étaient pas redistribuables et trois montraient des personnes identifiables.