Rotating drum

Ce qui est inclus

Une section de services complète : quatre cartes, un titre, et entre les deux un tambour 3D. Huit lames en pilule pendent d’une même charnière horizontale, à 45° l’une de l’autre ; le défilement de la page fait tourner l’ensemble autour de cet axe, si bien que les lames montent, se présentent de face, puis basculent hors du cadre.

Deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe. Le script n’écrit qu’une seule valeur dans la page — --sd-angle — et tout le reste du dessin en découle. Les deux fontes sont embarquées en local.

Fonctionnalités

• La rotation suit la traversée, pas les pixels — le tambour tourne de 102° entre le moment où la scène entre par le bas et celui où elle sort par le haut. La course est donc la même sur un téléphone et sur un grand écran, quelle que soit la hauteur de la fenêtre.
• Une lame pile de face à mi-course — la phase et l’amplitude sont choisies ensemble pour qu’au moment où la scène est centrée, l’angle vaille exactement 90°, un multiple du pas des lames. Ce n’est pas un hasard de réglage.
• Marche sans JavaScript — sans script, le tambour se pose à son angle de repos, celui-là même, et les huit mots restent une liste lue dans l’ordre.
• Une variable pour l’échelle — toutes les mesures dérivent de --sd-font-size : la scène, les lames, la perspective et l’encoche suivent ensemble. Le dessin 3D compris, pas seulement le texte.
• Deux façons de l’entraîner — data-drive="scroll", le défaut, indexe l’angle sur la traversée de la fenêtre. data-drive="time" le fait tourner à vitesse constante, pour les endroits où rien ne défile : un cadre d’aperçu, une modale, un panneau fixe. C’est ce mode qui anime la vue ci-dessus.
• Inertie réglable — data-ease va de 0 (le tambour colle à la position de défilement) à 1. La valeur peut changer après coup : le composant relit son propre attribut.
• Mouvement réduit respecté — sous prefers-reduced-motion, le tambour cesse de suivre le défilement et se pose sur sa lame de face. Le dégradé et la forme restent : ce sont une image, pas un mouvement.

Le poser dans une page

Deux fichiers à charger, puis la scène et ses huit lames :

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

<section class="rotating-drum" data-rotating-drum data-ease="0.14">
  <!-- data-drive="time" à la place, là où rien ne défile -->
  <div class="rotating-drum__stage" data-rotating-drum-stage>
    <div class="rotating-drum__viewport">
      <ul class="rotating-drum__drum" data-rotating-drum-axis>
        <li class="rotating-drum__blade">
          <span class="rotating-drum__pill">
            <span class="rotating-drum__word">Cadrage</span>
          </span>
        </li>
        <!-- sept autres lames -->
      </ul>
    </div>
  </div>
</section>

Les trois attributs data-* suffisent : le composant s’installe au chargement. Les cartes autour sont du balisage ordinaire, elles se placent seules autour de la scène.

Ce qu’il faut savoir

• Il faut de la course pour voir tourner. La rotation est indexée sur la traversée de la fenêtre : dans un cadre qui ne défile pas, le tambour reste à un angle fixe. C’est voulu — c’est ce qui rend l’aperçu ci-dessus lisible — mais une page où le composant occupe tout l’écran sans rien au-dessus ni en dessous ne montrera presque rien.
• Les lames de dos affichent leur mot en miroir. C’est ce que fait un solide qui tourne, et c’est le comportement de la référence. Pour ne garder que les faces avant, il y a data-backface="hidden" — au prix d’une moitié haute plus vide.
• Le tambour n’est pas un contrôle. Il ne prend pas le focus et n’expose aucun rôle : c’est du mouvement décoratif. Les huit mots, eux, sont une liste en clair dans le document, lue quoi qu’il arrive.
• Aucun style ni script en ligne. Le script passe par le CSSOM, qu’une politique de sécurité stricte autorise là où elle refuse une balise <style>. Vérifié en servant le dossier en HTTP avec l’en-tête du site, pas supposé.
• Le dessin vient d’ailleurs. Les proportions et la loi de rotation sont relevées sur un gabarit Webflow commercial, mesurées sur le site en ligne. Le code est original et les textes sont les nôtres : rien n’a été repris de son implémentation ni de sa rédaction.