/* =================================================================== thanaelfontaine.eu · transitions entre les pages (DA « Une journée ») On passe d'une page à l'autre comme d'un tableau à l'autre dans une galerie : on recule, la page apparaît dans son cadre doré au milieu d'un grand mur de tableaux, la caméra traverse le mur vers l'un des huit emplacements voisins, tiré au hasard (en haut, en bas, sur les côtés, en diagonale), où attend la page suivante, et s'en approche. Retour en arrière : le même trajet, à l'envers. Changement de langue : un fondu doux, sans voyage. Une seule caméra : deux propriétés animées sur ::view-transition, --z (le recul) et --pan (le trajet, de 0 à 1), héritées par les deux pages et utilisées par le décor du mur. Pages et mur bougent donc ensemble, sans pouvoir se décaler. La direction (--vx, --vy : -1, 0 ou 1) est posée sur par transitions.js. API View Transitions entre documents (Chrome, Edge, Safari 18.2+) ; ailleurs la navigation reste instantanée. Le mur est généré par tools/art_wall.py. Charte : docs/design/charte-une-journee.md, section 9. =================================================================== */ @view-transition { navigation: auto; types: gallery; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } @property --z { syntax: ""; inherits: true; initial-value: 1; } @property --pan { syntax: ""; inherits: true; initial-value: 0; } @property --vx { syntax: ""; inherits: true; initial-value: 1; } @property --vy { syntax: ""; inherits: true; initial-value: 0; } html:active-view-transition-type(gallery)::view-transition { --f: min(28px, 4.5vw); /* épaisseur du cadre des pages */ --s: max(10px, .9vw); /* l'écart serré entre deux cadres */ --Px: calc(100vw + 2 * var(--f) + var(--s)); /* d'un emplacement de page à l'autre (transitions.js pose la même valeur en px avec le mur) */ --Py: calc(100vh + 2 * var(--f) + var(--s)); background-color: #33261C; animation: tf-cam-z 1.8s cubic-bezier(.65, 0, .35, 1) both, tf-cam-pan 1.8s cubic-bezier(.65, 0, .35, 1) both; } /* on recule à 80 % : assez pour voir le mur, pas au point de rendre les œuvres minuscules */ @keyframes tf-cam-z { 0% { --z: 1; } 20%, 80% { --z: .8; } 100% { --z: 1; } } @keyframes tf-cam-pan { 0%, 18% { --pan: 0; } 82%, 100% { --pan: 1; } } html:active-view-transition-type(gallery)::view-transition-group(root) { animation-duration: 1.8s; } html:active-view-transition-type(gallery)::view-transition-old(root), html:active-view-transition-type(gallery)::view-transition-new(root) { animation: tf-hold 1.8s linear both; mix-blend-mode: normal; /* le cadre doré : hors de l'écran à taille réelle, il apparaît quand on recule ; pas de marie-louise claire, elle se lisait comme un rectangle blanc */ box-shadow: 0 0 0 calc(var(--f) * .12) #3A2811, 0 0 0 calc(var(--f) * .2) #E9CD8A, 0 0 0 calc(var(--f) * .72) #C9A15A, 0 0 0 calc(var(--f) * .84) #7A5520, 0 0 0 var(--f) #E6C47C, 0 30px 60px 6px rgba(0,0,0,.5); } /* la page de départ est à l'emplacement (0, 0), celle d'arrivée en (--vx, --vy) */ html:active-view-transition-type(gallery)::view-transition-old(root) { transform: translate(calc(-1 * var(--pan) * var(--vx) * var(--Px) * var(--z)), calc(-1 * var(--pan) * var(--vy) * var(--Py) * var(--z))) scale(var(--z)); } html:active-view-transition-type(gallery)::view-transition-new(root) { transform: translate(calc((1 - var(--pan)) * var(--vx) * var(--Px) * var(--z)), calc((1 - var(--pan)) * var(--vy) * var(--Py) * var(--z))) scale(var(--z)); } @keyframes tf-hold { from { opacity: 1; } to { opacity: 1; } } /* Le mur : une couche de fond par tableau, calculée au moment de la transition par transitions.js (mosaïques serrées, à la taille de l'écran) et posée dans une feuille #tf-mur le temps du voyage ; la caméra (--z, --pan) la fait bouger avec les pages. */ /* FR ↔ EN : la page ne voyage pas, les mots se remplacent */ html:active-view-transition-type(lang)::view-transition { animation: none; background: transparent; } html:active-view-transition-type(lang)::view-transition-group(root) { animation-duration: .6s; } html:active-view-transition-type(lang)::view-transition-old(root), html:active-view-transition-type(lang)::view-transition-new(root) { box-shadow: none; transform: none; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation-fill-mode: both; } html:active-view-transition-type(lang)::view-transition-old(root) { animation-name: tf-lang-out; } html:active-view-transition-type(lang)::view-transition-new(root) { animation-name: tf-lang-in; } @keyframes tf-lang-out { to { opacity: 0; filter: blur(6px); transform: translateY(-4px); } } @keyframes tf-lang-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }