/** * « Livret en action » — décor, nuage et défilement du bloc média et texte. * Réf design : Figma 14371:23042 et 14371:23747. * * Tout est scopé sur .is-style-livret, le style de bloc enregistré dans * inc/block-styles.php. Un média-texte ordinaire n'est pas touché. * * ÉTAT DE REPOS = ÉTAT FINAL * * Les trois variables d'animation valent leur position d'arrivée par défaut. * Sans JavaScript, sans build ou en mouvement réduit, la section reste la * maquette validée : c'est le script qui installe l'état de départ, et * seulement s'il tourne. Un décor ne doit jamais rester coincé hors cadre. * * Même règle que la section marque de l'accueil, pour la même raison. */ .wp-block-media-text.is-style-livret { position: relative; /* Parallaxe de la photo, en pixels de déplacement vertical. */ --dda-livret-para: 0; /* Rotation ajoutée à l'angle de repos réglé en admin. */ --dda-livret-rot: 0deg; /* Rapport de la boîte réservée par la colonne média. Relevé sur la * maquette, où « media in action » mesure 520 sur 800. */ --dda-livret-ratio: 520 / 800; /* * Le même rapport, exprimé en hauteur pour la colonne : c'est la forme dont * le calcul de réserve a besoin, une multiplication ne sachant pas manier * un `520 / 800` d'aspect-ratio. */ --dda-livret-b: 1.5385; /* * Hauteur de la photo, en facteur de la largeur de colonne. Sa largeur * multipliée par le rapport du fichier, que PHP relève dans la médiathèque * — le CSS n'a aucun moyen de le lire. */ --dda-livret-ih: calc(var(--dda-livret-l, 1.93) * var(--dda-livret-r, 0)); /* Décalage de la photo et excédent total, en facteur de la colonne. */ --dda-livret-iy: calc(var(--dda-livret-ih) * var(--dda-livret-yf, 0)); --dda-livret-hb: calc(var(--dda-livret-ih) - var(--dda-livret-b)); /* Sans alignement réglé, la photo dépasse également des deux côtés. */ --dda-livret-eh: calc(var(--dda-livret-hb) / 2 - var(--dda-livret-iy)); --dda-livret-eb: calc(var(--dda-livret-hb) / 2 + var(--dda-livret-iy)); /* * La réserve : l'excédent moins le débord toléré, plancher à zéro. Calculée * ici, sur le bloc, et non sur la colonne, pour que le nuage puisse la lire * et suivre le même décalage. */ --dda-livret-mh: max(0, calc(var(--dda-livret-eh) - var(--dda-livret-th, 0))); --dda-livret-mb: max(0, calc(var(--dda-livret-eb) - var(--dda-livret-tb, 0))); } /* ------------------------------------------------------------------------- * La boîte de la colonne média, et la réserve de hauteur * * LA PHOTO DÉBORDE, ET C'EST TOUT L'EFFET. La toile fait 1613 de large dans * une colonne de 520 : elle sort des quatre côtés et reste visible. Aucun * overflow ici, donc — une version précédente en posait un, et écrasait la * section. * * La colonne RÉSERVE sa boîte et la photo s'y pose en absolu, donc hors flux : * une image plus large que sa colonne qui resterait dans le flux tirerait la * hauteur de la rangée avec elle. * * Le débord horizontal est coupé au bord de la PAGE par .site-main, en * overflow-x: clip, ce qui est le comportement de la maquette. Verticalement, * en revanche, la photo venait RECOUVRIR LA SECTION VOISINE : la section ne * fait que la hauteur de la colonne, la photo peut faire le double. * * La section réserve donc ce qu'il faut, calculé et non saisi. La maquette * traitait ça par un padding de 800 px sur la colonne de texte : un nombre * absolu, qui ne survit ni à un changement de largeur ni à un autre fichier. * * POURQUOI DES MARGES SUR LA COLONNE, ET PAS UN PADDING SUR LE BLOC * * Un pourcentage de padding sur le bloc se résout sur la largeur de son bloc * ENGLOBANT — le groupe parent, plus large que les 1280 de l'alignwide. La * référence serait fausse. Sur un élément de grille, les pourcentages se * résolvent sur l'aire de grille, donc sur la colonne : exactement la référence * du calcul. Et les marges d'un élément de grille agrandissent la rangée, donc * la section, ce qui est le but. * * Tout se rapporte à la largeur de colonne, ce qui fait disparaître la largeur * du média de l'équation. * * ih hauteur de la photo = largeur × rapport du fichier * b hauteur de la boîte = 800 / 520 * iy décalage vertical = ih × décalage réglé * hb excédent total = ih − b * * L'excédent se répartit selon l'ancre, donnée par l'alignement du bloc. La * réserve vaut cet excédent moins le débord toléré, plancher à zéro — c'est le * max() qui le pose, et c'est lui aussi qui neutralise tout quand le rapport du * fichier est inconnu : --dda-livret-r vaut alors 0, donc ih et hb sont * négatifs. * ------------------------------------------------------------------------- */ /* Ancre en bas, le cas de la maquette : tout l'excédent passe au-dessus. */ .wp-block-media-text.is-style-livret.is-vertically-aligned-bottom { --dda-livret-eh: calc(var(--dda-livret-hb) - var(--dda-livret-iy)); --dda-livret-eb: var(--dda-livret-iy); } /* Ancre en haut : l'inverse. */ .wp-block-media-text.is-style-livret.is-vertically-aligned-top { --dda-livret-eh: calc(var(--dda-livret-iy) * -1); --dda-livret-eb: calc(var(--dda-livret-hb) + var(--dda-livret-iy)); } .is-style-livret .wp-block-media-text__media { position: relative; aspect-ratio: var(--dda-livret-ratio, 520 / 800); margin-block: calc(var(--dda-livret-mh) * 100%) calc(var(--dda-livret-mb) * 100%); } /* * ANCRAGE : décalages et rotation à zéro, la photo est ferrée du côté OPPOSÉ * au texte, et verticalement selon l'alignement du bloc. * * Horizontalement, c'est ce qui fait qu'inverser la position du média donne une * composition symétrique au lieu d'une photo qui reste collée au même bord. * Média à gauche, elle est donc ferrée à droite — et comme elle est plus large * que sa colonne, elle déborde du côté du bord de page. * * Verticalement, l'ancre suit la classe que WordPress pose déjà pour * l'alignement du bloc : en haut, au centre, en bas. Pas de réglage en double, * c'est le contrôle natif qui commande. * * Le centrage passe par top et bottom à zéro avec des marges automatiques : la * hauteur de la photo est définie, elle se déduit de sa largeur et de son * rapport, donc les marges se partagent l'espace restant. Un translate de -50 % * aurait marché aussi, mais il entrerait en conflit avec le décalage vertical * réglé en admin, qui utilise déjà translate. */ .is-style-livret .wp-block-media-text__media img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; /* * Largeur en pourcentage de la colonne, décalages en pourcentage de * l'IMAGE : translate compte déjà sur l'élément lui-même, donc décaler une * photo d'un quart d'elle-même se règle à l'œil, sans calcul. */ width: calc(var(--dda-livret-l, 1.93) * 100%); max-width: none; height: auto; margin-block: auto; translate: calc(var(--dda-livret-xf, 0) * 100%) calc(var(--dda-livret-yf, 0) * 100%); rotate: calc(var(--dda-livret-angle, 0deg) + var(--dda-livret-rot)); transform: translateY(var(--dda-livret-para)); transform-origin: center; will-change: transform; } /* Média à droite : le texte est à gauche, la photo se ferre à gauche. */ .is-style-livret.has-media-on-the-right .wp-block-media-text__media img { right: auto; left: 0; } .is-style-livret.is-vertically-aligned-top .wp-block-media-text__media img { top: 0; bottom: auto; margin-block: 0; } .is-style-livret.is-vertically-aligned-bottom .wp-block-media-text__media img { top: auto; bottom: 0; margin-block: 0; } /* ------------------------------------------------------------------------- * Décors * * Ils se calent sur la COLONNE MÉDIA sans être ses enfants. Un enfant en * position absolue d'un conteneur grid, dont le grid-column est défini, prend * sa CELLULE comme bloc englobant — c'est ce qui permet de les injecter au * niveau du bloc, seul endroit où le processeur HTML de WordPress sait insérer * du balisage, tout en les positionnant sur la photo. * * Les pourcentages portent donc sur la colonne média, pas sur le bloc. * ------------------------------------------------------------------------- */ .is-style-livret .dda-decor { position: absolute; z-index: 1; top: var(--dda-decor-y, 0%); /* * X se mesure depuis le bord de la colonne QUI FAIT FACE AU TEXTE, et une * valeur négative fait sortir le décor de la colonne pour venir sur le * texte — c'est ce que montre la maquette. Média à gauche, le texte est à * droite : on mesure donc depuis la droite, et le décor est retourné pour * que sa courbe parte toujours vers la photo. */ right: var(--dda-decor-x, 0%); width: var(--dda-decor-taille, 30%); height: max-content; color: var(--wp--preset--color--orange, #fc4c02); /* * Même parallaxe que la photo : les décors se lisent comme posés sur elle. * Une vitesse plus rapide, essayée pour la profondeur, les faisait glisser * sur la photo et troublait l'œil. */ transform: translateY(var(--dda-livret-para)) scaleX(-1); pointer-events: none; will-change: transform; } .is-style-livret .dda-decor svg { display: block; width: 100%; height: auto; } /* * Média à droite, le cas de la maquette : la colonne média est la seconde de la * grille, le texte est à gauche, et le décor se mesure donc depuis la gauche. * C'est le sens dans lequel les fichiers ont été dessinés, aucun retournement. */ .is-style-livret.has-media-on-the-right .dda-decor { right: auto; left: var(--dda-decor-x, 0%); transform: translateY(var(--dda-livret-para)); } /* ------------------------------------------------------------------------- * Apparition des décors * * Chacun à son entrée dans l'écran, indépendamment de l'autre : l'étoile * apparaît en tournant dans le sens antihoraire, la courbe se dessine. * * haut l'étoile, puis la courbe, qui part de l'étoile ; * bas la courbe, qui finit sur l'étoile, puis l'étoile. * * ÉTAT DE REPOS = ÉTAT FINAL. Les décors sont visibles par défaut ; c'est * media-text-decor.js qui pose .est-arme (état de départ) puis .est-joue * (l'animation), et seulement s'il tourne et que le mouvement n'est pas réduit. * * LA COURBE est vue à travers un masque (cf. les fichiers SVG) : un tracé * plein, en pathLength 1, dont le décalage de tiret dévoile les pointillés. * Décalage 1, la courbe est masquée et se dévoile depuis son DÉBUT ; -1, depuis * sa FIN. Le tracé du haut commence à l'étoile, celui du bas aussi : le bas se * dessine donc à l'envers pour finir sur elle. * ------------------------------------------------------------------------- */ .is-style-livret .dda-decor--haut { --dda-etoile-delai: 0ms; --dda-trace-delai: 350ms; --dda-trace-depart: 1; } .is-style-livret .dda-decor--bas { --dda-trace-delai: 0ms; --dda-etoile-delai: 750ms; --dda-trace-depart: -1; } .is-style-livret .dda-decor { /* Angle de départ de l'étoile : positif, elle revient à 0 en tournant * dans le sens antihoraire. */ --dda-etoile-tour: 30deg; } /* Média à gauche, le décor est retourné : on inverse l'angle pour que la * rotation reste antihoraire à l'écran. */ .is-style-livret:not(.has-media-on-the-right) .dda-decor { --dda-etoile-tour: -30deg; } /* Le groupe enveloppe n'a pas de transform : il tourne sur son propre centre. */ .is-style-livret .dda-decor__etoile { transform-box: fill-box; transform-origin: center; } .is-style-livret .dda-decor.est-arme .dda-decor__etoile { opacity: 0; rotate: var(--dda-etoile-tour); } .is-style-livret .dda-decor.est-arme .dda-decor__trace { stroke-dashoffset: var(--dda-trace-depart); } /* Après .est-arme, à poids égal : c'est l'ordre qui la fait gagner. */ .is-style-livret .dda-decor.est-joue .dda-decor__etoile { opacity: 1; rotate: 0deg; transition: opacity 500ms ease-out var(--dda-etoile-delai), rotate 800ms cubic-bezier(0.33, 1, 0.68, 1) var(--dda-etoile-delai); } .is-style-livret .dda-decor.est-joue .dda-decor__trace { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1) var(--dda-trace-delai); } /* ------------------------------------------------------------------------- * Nuage * * Dans la colonne de texte, derrière le titre. La rotation vit ici et non dans * le fichier : le SVG reste droit, donc réutilisable ailleurs. * ------------------------------------------------------------------------- */ .is-style-livret .dda-nuage, .wp-block-media-text.is-style-livret::before { position: absolute; /* * Sous la photo (0) ou dessus (3), au choix dans le panneau « Décor ». Dans * les deux cas sous le texte (4) : le nuage est un fond, pas une * illustration à lire. Cf. « Plans » plus bas. */ z-index: var(--dda-nuage-z, 0); /* * Début ET fin : pour un élément en position absolue, une ligne de fin * `auto` désigne le bord du conteneur, pas la ligne suivante. Avec * `grid-column: 1` seul, la « cellule » allait jusqu'au bord droit du bloc * et les pourcentages se comptaient sur toute sa largeur. */ grid-row: 1 / span 1; grid-column: 2 / span 1; /* * Position et taille réglées en admin, en pourcentage de la CELLULE de la * colonne de texte : largeur de la colonne pour X et la taille, hauteur de * la section pour Y. C'est le même bloc englobant au front et dans * l'aperçu de l'éditeur, d'où une position identique des deux côtés. * * 30 % par défaut : la maquette lui en donne à peu près la moitié, mais sa * section est bien plus haute que la nôtre. */ top: var(--dda-nuage-y, 0%); left: var(--dda-nuage-x, 0%); width: var(--dda-nuage-taille, 30%); height: max-content; color: var(--wp--preset--color--green, #89a135); /* * Course du nuage : il part du HAUT DU BLOC — son aire de grille commence * là — et descend jusqu'à se poser juste avant le titre. * * La distance ne s'exprime pas en CSS : elle va du haut du bloc au haut du * texte, or le texte est aligné en bas et sa hauteur dépend de ce qu'on y * écrit. C'est media-text-decor.js qui la mesure et l'écrit ici. * * translate et non transform : la rotation occupe déjà transform, et les * deux propriétés se composent sans se marcher dessus. * * La marge compense le débord de la ROTATION : tournée de 25°, la forme * sort de sa boîte en haut et en bas de (bbox − hauteur) / 2. Sans elle, le * nuage mordait sur la section précédente — exactement ce qu'on venait de * corriger pour la photo. Le débord vaut 0,1866 fois la largeur du nuage, * d'où le produit avec sa taille : une marge en pourcentage se compte sur * la largeur de la cellule, comme la taille. La valeur vient du rapport du * fichier, 162,628 / 307,47, et de sin 25° et cos 25°. */ margin-top: calc(var(--dda-nuage-taille, 30%) * 0.1866); translate: 0 var(--dda-nuage-course, 0); /* * L'angle passe par la propriété `rotate` et non par `transform` : les deux * se composent avec `translate` sans se marcher dessus, et surtout chacune * peut avoir sa propre transition. * * Les 25° de repli sont la valeur de DÉPART, celle de la maquette. Le * script part de là pour aller vers l'angle d'arrivée : les deux valeurs * doivent rester d'accord, elle est donc rappelée en tête de * assets/js/media-text-decor.js. */ rotate: var(--dda-nuage-angle, 25deg); /* * Le retard demandé. Le script écrit une nouvelle cible à chaque image et la * transition la rattrape en 200 ms, ce qui donne au nuage un mouvement * souple plutôt que rivé au défilement. * * La courbe décélère à l'arrivée et NE REBONDIT PAS : ses deux points de * contrôle valent 1 en ordonnée, jamais plus, donc la valeur ne dépasse * jamais sa cible. C'est ce qui la distingue de --dda-spring, l'autre * assouplissement du thème, qui monte lui à 1,394 pour faire rebondir le * logo et les pastilles — inadapté à un décor qui suit le défilement, où un * dépassement se lirait comme un tremblement. */ transition: translate 200ms cubic-bezier(0.33, 1, 0.68, 1), rotate 200ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; } .is-style-livret .dda-nuage svg { display: block; width: 100%; height: auto; } /* Média à droite : le texte est la PREMIÈRE colonne, le nuage l'y suit. */ .is-style-livret.has-media-on-the-right .dda-nuage, .wp-block-media-text.is-style-livret.has-media-on-the-right::before { grid-column: 1 / span 1; } /* ------------------------------------------------------------------------- * Plans * * 0 nuage « sous la photo » * 1 décors — sous la photo, qui passe devant eux * 2 photo * 3 nuage « sur la photo » * 4 texte * * Tout se joue dans UN SEUL contexte d'empilement, celui qui contient le bloc : * ni le bloc, ni la figure, ni la colonne de texte n'en créent. C'est la * condition pour que le nuage, posé sur le bloc, puisse passer entre la photo * et le texte. La colonne de texte en créait un (z-index: 1) : c'est le texte * lui-même qui porte maintenant son plan, via ses enfants directs. * ------------------------------------------------------------------------- */ .is-style-livret .wp-block-media-text__media img { z-index: 2; } .is-style-livret .wp-block-media-text__content > * { position: relative; z-index: 4; } /* ------------------------------------------------------------------------- * Décalage vertical du texte * * La maquette pose le texte 800 px sous le haut de la section. Ce nombre est * l'expression ABSOLUE de « le texte en bas », que l'alignement vertical du * bloc produit déjà, et fluide par construction. Ce réglage ne sert qu'au * dernier écart : 80 px dans la maquette, soit 10 % de la hauteur de la * colonne média. * * Le pourcentage se compte sur la CELLULE DE GRILLE et non sur le texte. Un * élément positionné en relatif prend son aire de grille comme bloc englobant, * et l'aire fait la hauteur de la rangée, donc celle de la colonne média. Le * décalage suit ainsi la largeur du média et le rapport de la boîte, sans qu'on * ait à les redire. * * top et non padding : un padding grandirait la colonne de texte, donc la * rangée, donc la boîte réservée par le média — un réglage qui déplacerait ce * sur quoi il se mesure. * * Pas de z-index ici : il créerait un contexte d'empilement, cf. « Plans ». * ------------------------------------------------------------------------- */ .is-style-livret .wp-block-media-text__content { position: relative; top: var(--dda-livret-texte, 0%); } /* ------------------------------------------------------------------------- * Mobile * * Sous 782 le bloc s'empile et la colonne média prend toute la largeur. Le * débord d'une photo à 193 % n'a plus de sens à cette largeur, et les décors, * calés sur une composition à deux colonnes, non plus. À revoir quand la * maquette mobile de cette section existera. * ------------------------------------------------------------------------- */ @media (width <= 781px) { .is-style-livret .wp-block-media-text__media { aspect-ratio: auto; } .is-style-livret .wp-block-media-text__media img { position: static; width: 100%; translate: none; } .is-style-livret .wp-block-media-text__content { top: 0; } .is-style-livret .dda-decor, .is-style-livret .dda-nuage { display: none; } } /* * Mouvement réduit : le script ne tourne pas, aucune variable n'est écrite et * la section reste à son état de repos. On coupe la transition en plus, pour * qu'un changement de valeur venu d'ailleurs ne s'anime pas non plus. */ @media (prefers-reduced-motion: reduce) { .is-style-livret .dda-nuage { transition: none; } } /* ------------------------------------------------------------------------- * Aperçu du canevas de l'éditeur * * Le filtre editor.BlockListBlock enveloppe un bloc du cœur, il ne l'ouvre * pas : impossible d'y insérer les sans casser le DOM qu'attend * Gutenberg. Décors et nuage s'y dessinent donc en image de fond sur des * pseudo-éléments, à partir des mêmes fichiers SVG que le front. * * CHAQUE PSEUDO-ÉLÉMENT A LE MÊME BLOC ENGLOBANT QUE SON PENDANT DU FRONT * * décors ::before / ::after de la colonne média — au front, les décors * sont DANS la figure ; * nuage ::before du bloc, placé dans la cellule de texte — partage la * règle du .dda-nuage du front, plus haut. * * Mêmes réglages, mêmes pourcentages, même boîte : même endroit. Une version * précédente posait les décors sur la cellule de grille, qui contient en plus * la réserve de hauteur, et le nuage dans la colonne de texte, plus basse que * sa cellule : rien ne tombait au même endroit qu'au front. * * Ces règles ne dessinent rien au front, sans avoir à le tester : les * variables d'image ne sont posées que par l'aperçu, et leur repli vaut `none`. * ------------------------------------------------------------------------- */ .is-style-livret .wp-block-media-text__media::before, .is-style-livret .wp-block-media-text__media::after, .wp-block-media-text.is-style-livret::before { content: ""; background-repeat: no-repeat; background-size: contain; pointer-events: none; } /* Décors : mêmes cotes que .dda-decor, la parallaxe en moins. */ .is-style-livret .wp-block-media-text__media::before, .is-style-livret .wp-block-media-text__media::after { position: absolute; z-index: 1; transform: scaleX(-1); } .is-style-livret .wp-block-media-text__media::before { top: var(--dda-decor-haut-y, 0%); right: var(--dda-decor-haut-x, 0%); width: var(--dda-decor-haut-taille, 30%); aspect-ratio: 302.357 / 498.873; background-image: var(--dda-decor-haut-img, none); } .is-style-livret .wp-block-media-text__media::after { top: var(--dda-decor-bas-y, 62%); right: var(--dda-decor-bas-x, 0%); width: var(--dda-decor-bas-taille, 30%); aspect-ratio: 356.663 / 291.584; background-image: var(--dda-decor-bas-img, none); } .is-style-livret.has-media-on-the-right .wp-block-media-text__media::before { right: auto; left: var(--dda-decor-haut-x, 0%); transform: none; } .is-style-livret.has-media-on-the-right .wp-block-media-text__media::after { right: auto; left: var(--dda-decor-bas-x, 0%); transform: none; } /* Nuage : position, taille, plan et angle de départ viennent de .dda-nuage. */ .wp-block-media-text.is-style-livret::before { /* `auto` et non le max-content du front, sans quoi le rapport ne joue pas * sur une boîte vide. */ height: auto; aspect-ratio: 307.47 / 162.628; background-image: var(--dda-nuage-img, none); }