/* * Le mouvement au défilement, sur tout le site public. * * Des animations liées à la position de défilement (animation-timeline), * à la manière des pages produit d'Apple : le contenu se pose à mesure * qu'on descend, les grands titres s'allument mot à mot, les images * grandissent jusqu'à leur place, le hero s'efface en profondeur. Aucun * minuteur : remonter rejoue le mouvement à l'envers. * * Tout dépend de html.sm-on, posée par assets/js/scroll-motion.js * seulement si le navigateur gère animation-timeline et que le visiteur * n'a pas demandé moins de mouvement. Sinon, rien ici ne s'applique : les * apparitions .rv et animate.css restent celles d'avant. * * Seuls opacity, translate et scale sont animés — translate et scale sont * des propriétés distinctes de transform, que le survol, l'inclinaison 3D * et les apparitions .rv gardent pour eux. * * view() mesure un élément dans son conteneur de défilement le plus * proche, et overflow: hidden en crée un. Un élément pris dans une * section en overflow: hidden (.sm-hosted) suit donc la timeline de cette * section (.sm-host, --sm-host), mesurée dans la page, et sa plage est * décalée de sa distance au haut de la section (--sm-o, posée par le * script). */ .sm-progress { display: none; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Les courses suivent la hauteur de l'écran : sur un écran bas (téléphone à l'horizontale, fenêtre réduite), 300 px en occuperaient presque tout, et le contenu resterait pâle au milieu. Le script lit les mêmes valeurs. */ html.sm-on { --sm-course: min(300px, 32svh); --sm-zoom-course: min(420px, 40svh); --sm-step: min(64px, 7svh); } /* ---- La barre de lecture, sur le liseré du header. -------------- Même plan que le header (50) : placée juste après lui dans la page, elle passe devant ; la fenêtre de devis et le chat, placés plus loin, passent devant elle. */ html.sm-on .sm-progress { display: block; position: fixed; inset: 0 0 auto 0; z-index: 50; height: 3px; background: linear-gradient(90deg, #0369A1, #0EA5E9 55%, #22D3EE); box-shadow: 0 0 12px rgba(34, 211, 238, .55); transform-origin: left center; scale: 0 1; pointer-events: none; animation: sm-progress linear both; animation-timeline: scroll(root); } @keyframes sm-progress { to { scale: 1 1; } } /* ---- Les apparitions, liées au défilement. ---------------------- Même mouvement pour les .rv du design system et pour les blocs des anciennes pages que le script étiquette .sm-rise. La plage est une distance fixe, pas un pourcentage : un grand bloc ne met pas plus longtemps à se poser qu'un petit. --sm-i décale les cartes d'une même rangée, pour la cascade ; --sm-end raccourcit la course des blocs du bas de page, qui ne peuvent pas remonter assez haut pour la finir. */ html.sm-on .sm-rise, html.sm-on .rv, html.sm-on .rv.in { animation: sm-rise linear both; animation-timeline: view(); animation-range: cover calc(var(--sm-o, 0px) + var(--sm-i, 0) * var(--sm-step)) cover calc(var(--sm-o, 0px) + var(--sm-end, var(--sm-course)) + var(--sm-i, 0) * var(--sm-step)); } /* Pris dans une section qui coupe ce qui dépasse : la timeline de la section, et la plage décalée d'autant (--sm-o). */ html.sm-on .sm-host { view-timeline: --sm-host block; } html.sm-on .sm-rise.sm-hosted, html.sm-on .sm-zoom.sm-hosted, html.sm-on .rv.sm-hosted, html.sm-on .rv.in.sm-hosted { animation-timeline: --sm-host; } /* Le décalage de départ de .rv ne sert plus : c'est l'animation qui place l'élément. */ html.sm-on .rv:not(.in):not(.sm-still) { transform: none; } /* Un .rv qui garde l'apparition d'avant — dans le hero, déjà à l'écran au chargement, ou au tout bas de page — garde aussi son filet : sans lui, un .rv trop près du bas du premier écran pour l'IntersectionObserver resterait invisible. */ html.sm-on .rv.sm-still { animation: rv-failsafe 0s linear 2.5s forwards; } html.sm-on .rv.sm-still.in { animation: none; } /* Déjà à l'écran quand la police a fini de charger (le hero raccourcit d'autant) : posé d'office, sans attendre de défiler. */ html.sm-on .sm-now, html.sm-on .sm-now .sm-w { animation: none; } /* Au clavier, ce qui a le focus s'affiche net, même en cours de course. */ html.sm-on :is(.sm-rise, .sm-zoom, .rv):is(:focus, :focus-within) { animation: none; opacity: 1; } html.sm-on .sm-words:focus-within .sm-w { animation: none; } /* Les entrées latérales, seulement sur grand écran : sur mobile, un bloc pleine largeur décalé déborderait de l'écran tant qu'il n'est pas posé, et le body en overflow-x: clip n'empêche pas le viewport de s'élargir. En dessous, il monte comme les autres. */ @media (min-width: 1024px) { html.sm-on .rv-l, html.sm-on .rv-l.in { animation-name: sm-from-left; } html.sm-on .rv-r, html.sm-on .rv-r.in { animation-name: sm-from-right; } } html.sm-on .rv-s, html.sm-on .rv-s.in { animation-name: sm-settle; } @keyframes sm-rise { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } } @keyframes sm-from-left { from { opacity: 0; translate: -32px 0; } to { opacity: 1; translate: 0 0; } } @keyframes sm-from-right { from { opacity: 0; translate: 32px 0; } to { opacity: 1; translate: 0 0; } } @keyframes sm-settle { from { opacity: 0; scale: .94; translate: 0 24px; } to { opacity: 1; scale: 1; translate: 0 0; } } /* ---- Les grands titres s'allument mot à mot. -------------------- Le script enveloppe chaque mot d'un .sm-w et lui donne sa place dans la phrase (--p, de 0 à 1) ; le titre porte la timeline. Dans une section qui coupe, la timeline est celle de la section et la plage s'exprime en px : --sm-u vaut 1 % de la traversée du titre (hauteur de l'écran + hauteur du titre). */ html.sm-on .sm-words:not(.sm-hosted) { view-timeline: --sm-words block; } html.sm-on .sm-w { animation: sm-word linear both; animation-timeline: --sm-words; animation-range: cover calc(6% + var(--p, 0) * 30%) cover calc(14% + var(--p, 0) * 30%); } html.sm-on .sm-words.sm-hosted .sm-w { animation-timeline: --sm-host; animation-range: cover calc(var(--sm-o, 0px) + (6 + var(--p, 0) * 30) * var(--sm-u, 9px)) cover calc(var(--sm-o, 0px) + (14 + var(--p, 0) * 30) * var(--sm-u, 9px)); } @keyframes sm-word { from { opacity: .14; } to { opacity: 1; } } /* ---- Les images grandissent jusqu'à leur place. ---------------- */ html.sm-on .sm-zoom { animation: sm-zoom linear both; animation-timeline: view(); animation-range: cover var(--sm-o, 0px) cover calc(var(--sm-o, 0px) + var(--sm-end, var(--sm-zoom-course))); } @keyframes sm-zoom { from { opacity: .2; scale: .9; } to { opacity: 1; scale: 1; } } /* ---- Le hero s'efface en profondeur. ---------------------------- Le texte remonte plus vite que la page et pâlit, mais seulement une fois bien engagé vers le haut : tant qu'on le lit, il reste net. La section porte la timeline, pour que les pages puissent y accrocher d'autres plans (la galerie de l'accueil). */ html.sm-on .sm-hero { view-timeline: --sm-hero block; } html.sm-on .sm-hero-copy { animation: sm-hero-copy linear both; animation-timeline: --sm-hero; animation-range: exit 45% exit 100%; } @keyframes sm-hero-copy { to { translate: 0 -80px; opacity: .3; } } } }