Gallery

§9.5

Les compositions possibles du système, et les quatre animations de signature du projet. Aucune n'est un effet posé par-dessus la mise en page : chacune anime ce dont le projet est fait — la grille, la graisse typographique, l'encre, le filet.

Une contrainte commune aux quatre

Aucune ne touche à l'opacité du texte. Il n'existe donc aucun instant où le contenu serait illisible, ni aucun état dans lequel il pourrait rester bloqué si l'animation ne partait pas — le défaut que ce projet a rencontré trois fois et qui lui a coûté un titre, des compteurs et des étapes de section.

A

Recomposition de grille

Les mêmes blocs passent d'une composition à l'autre. Motion mesure la position avant et après, puis interpole en transform : aucun bloc n'est démonté, donc le focus clavier et la sélection de texte survivent à la transition.

01

02

03

04

05

06

07

08

09

10

11

12

Grille 12 colonnes — 12 blocs

B

Onde de graisse

Archivo est une police variable. Plutôt que de faire entrer le texte, on interpole son axe wght caractère par caractère selon la distance au pointeur. La lettre ne se déplace pas et ne s'efface jamais — seule son épaisseur respire.

Le poids fait le rythme

Passez le pointeur le long de cette ligne.

Sans pointeur fin — tactile, ou hover: none — l'onde est pilotée par la progression du scroll, pour que l'effet reste vivant sur mobile plutôt que d'y être mort.

C

Révélation à l'encre

Un bruit fractal déplace les pixels du bloc, puis l'amplitude retombe à zéro : le texte se reforme comme une impression qui sèche. Le filtre est retiré à la fin — le laisser en place coûterait la netteté du rendu sous-pixel pour toute la vie de la page.

L'encre se dépose, puis elle sèche

feTurbulence + feDisplacementMap

L'opacité ne bouge à aucun moment. Ce bloc est à cent pour cent du premier au dernier frame : il est déformé, jamais invisible.

D

Filets pilotés par le scroll, sans JavaScript

animation-timeline lie une animation CSS à la position d'un élément dans le viewport. Pas d'IntersectionObserver, pas d'écouteur de scroll, pas de rAF : le travail se fait sur le thread de composition, donc il ne peut pas être retardé par du JavaScript.

La graisse suit le défilement

Le filet se trace, la colonne se remplit et le titre prend du poids à mesure que ce bloc traverse le viewport. Tout est écrit dans scroll-driven.css, sous @supports.

Là où la propriété n'existe pas, rien n'est masqué : le bloc est simplement rendu dans son état final.

E

Patterns

Grille

Points

Hachures

Trame

Quatre trames SVG en currentColor : elles suivent le thème sans seconde déclaration, et restent nettes à n'importe quelle densité d'écran.

F

Variantes de hero

Éditorial

Titre pleine chasse, filet, chapô court

Une base, pas un template.

Chapô de deux lignes.

Split

Titre à gauche, index à droite

Système, pas page

Tableau

Titre + définitions en grille à filet

Mesuré