/** * Motion — lot 6. * * Handoff, section « Interactions & motion design ». Trois principes tiennent * tout ce fichier : * * 1. « Aucune animation ne doit retarder l'affichage du contenu ni bloquer une * interaction. » Rien ici ne touche au `display`, a la hauteur ou au flux : * uniquement `opacity` et `transform`, qui se composent sur le GPU. * 2. Le contenu doit rester lisible sans JavaScript. Aucun etat masque n'est * inconditionnel : tout est prefixe par `.odg-motion`, une classe posee sur * par `assets/js/motion-classe.js` — et par lui seul. Sans JavaScript, sans * `IntersectionObserver`, ou avec `prefers-reduced-motion: reduce`, la classe * n'existe pas et ce fichier n'a plus aucun effet visuel. * 3. Rien ne clignote au-dessus de la ligne de flottaison. La classe est posee * par un script enfile dans le , donc avant le premier rendu ; et les * blocs deja visibles au chargement ne recoivent jamais `--masque` (c'est * motion.js qui mesure). Le hero, lui, est une entree voulue, pas un * clignotement : il part masque des le premier rendu et n'apparait qu'une * fois. * * Les etats de survol (boutons, cartes de format, clic a `scale(.985)`) sont * deja ecrits aux lots 1, 2 et 4 avec exactement les valeurs du handoff : ils ne * sont pas repris ici. */ /* --- Animations nommees (prefixe odg*, convention du handoff) --- */ @keyframes odgRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes odgWipe { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } @keyframes odgBarreEntree { from { transform: translateY(100%); } to { transform: none; } } /* ------------------------------------------------------------------------- * Revelation au defilement * * `opacity 0 -> 1` + `translateY(18px) -> 0`, 700 ms, courbe du handoff, une * seule fois par element. C'est une transition et non une animation : l'element * masque porte `.odg-anim--masque`, motion.js retire la classe, la transition * joue. Un element revele ne peut donc pas rejouer, et le filet de securite se * resume a retirer la classe restante. * ---------------------------------------------------------------------- */ .odg-motion .odg-anim { transition: opacity var(--odg-duree-revelation) var(--odg-courbe), transform var(--odg-duree-revelation) var(--odg-courbe); will-change: opacity, transform; } .odg-motion .odg-anim--masque { opacity: 0; transform: translateY(18px); } /* La transition finie, plus rien a promettre au compositeur. */ .odg-motion .odg-anim--revele { will-change: auto; } /* ------------------------------------------------------------------------- * Hero en cascade * * Purement CSS : les delais sont connus a l'avance et le hero est toujours au * chargement. Passer par JavaScript aurait demande d'attendre le DOM, donc * d'afficher puis de masquer — exactement le clignotement a eviter. * * Colonne texte : `odgRise`, decalage 90 ms a partir de 150 ms, sur les cinq * enfants reels (sur-titre, titre, chapo, actions, puces). * ---------------------------------------------------------------------- */ .odg-motion .odg-hero__texte > * { animation: odgRise var(--odg-duree-revelation) var(--odg-courbe) both; } .odg-motion .odg-hero__texte > *:nth-child(1) { animation-delay: 150ms; } .odg-motion .odg-hero__texte > *:nth-child(2) { animation-delay: 240ms; } .odg-motion .odg-hero__texte > *:nth-child(3) { animation-delay: 330ms; } .odg-motion .odg-hero__texte > *:nth-child(4) { animation-delay: 420ms; } .odg-motion .odg-hero__texte > *:nth-child(5) { animation-delay: 510ms; } .odg-motion .odg-hero__texte > *:nth-child(n + 6) { animation-delay: 600ms; } /* * Visuels : `odgWipe` (scale 1.04 -> 1), 900 ms, decalage 120 ms a partir de * 300 ms. Les trois cibles sont les cadres d'attente — le grand, puis les deux * de la paire —, aucun visuel definitif n'existant a ce jour. */ /* * Deux precautions, apprises a la relecture : * * 1. Pas de forme raccourcie `animation:` ici. Le raccourci reinitialise * `animation-delay` a `0s`, et cette regle-ci est plus specifique que la * surcharge de delai du grand visuel (trois classes contre deux) : le * `300ms` etait donc ecrase. Les longhands ne reinitialisent rien. * 2. Aucun `nth-child`. Les delais ne se deduisent plus de la position dans la * fratrie mais des classes que le gabarit pose deja : le grand visuel se * reconnait a `--hero`, et le second visuel de la paire est simplement celui * qui a un `--paire` avant lui (`~`, combinateur de freres generaux, qui ne * compte pas les positions). Un titre ou une legende ajoute dans * `.odg-hero__paire` ne decale donc plus rien. * * Le delai de base porte le 420 ms du premier visuel de la paire ; les deux * autres cas le surchargent. */ .odg-motion .odg-hero__visuels .odg-visuel { animation-name: odgWipe; animation-duration: var(--odg-duree-wipe); animation-timing-function: var(--odg-courbe); animation-fill-mode: both; animation-delay: 420ms; } .odg-motion .odg-hero__visuels .odg-visuel--hero { animation-delay: 300ms; } .odg-motion .odg-hero__visuels .odg-visuel--paire ~ .odg-visuel--paire { animation-delay: 540ms; } /* ------------------------------------------------------------------------- * Barre d'achat persistante — entree par translateY(100%) -> 0. * * Laissee sans motion au lot 5, ecrite ici. Elle joue a chaque fois que * `produit.js` retire l'attribut `hidden`, sans qu'aucun etat ne soit duplique : * l'attribut reste la seule source de verite. La barre n'existe qu'en dessous de * 767 px (produit.css) ; ailleurs elle est `display: none` et l'animation ne * demarre jamais. * ---------------------------------------------------------------------- */ .odg-motion .odg-barre:not([hidden]) { animation: odgBarreEntree var(--odg-duree-barre) var(--odg-courbe) both; }