/* ========================================================================= SCROLL2 — les mouvements de défilement, deuxième série ------------------------------------------------------------------------- Va avec assets/js/scroll2.js. À charger EN DERNIER, après toutes les autres feuilles de style de la page. CE FICHIER REMPLACE scroll-plus.css. Il en reprend les quatre effets (ils étaient bons, ils n'avaient jamais été branchés) et en ajoute quatre nouveaux. Ne branchez JAMAIS les deux fichiers en même temps : voir _a-integrer/scroll2.md. CE QU'IL FAIT REPRIS DE scroll-plus 1. LES PHOTOS de la bande « métiers » (.ben__ph .ph) et la photo de la page contact (.ct__ph) : un volet de la couleur du cadre se lève, l'image se pose, puis elle glisse très légèrement dans son cadre pendant qu'on défile. 2. LES MOTS-CLÉS marqués « data-sc2-mark » se soulignent au passage. 3. LE VOILE de la section noire respire quand on la traverse. 4. UNE COLONNE marquée « data-sc2-tenir » retient sa place pendant que la colonne d'à côté défile, puis repart. NOUVEAU 5. L'ÉVENTAIL : les cinq photos de la bande ne glissent plus toutes à la même vitesse. Elles s'écartent en arrivant, s'alignent exactement quand la bande est au centre de l'écran (le moment où on la regarde), puis se rouvrent en sortant. 6. LA PAGE QUI BOUGE DANS LE NAVIGATEUR (page exemples) : dans chacune des trois démonstrations, la page dessinée glisse de quelques pixels dans son cadre, à un rythme différent par carte. 7. LE FILET DE CHAPITRE : un trait fin se trace au-dessus d'un en-tête de section marqué « data-sc2-trait ». 8. L'EN-TÊTE QUI S'ESCAMOTE, sur petit écran seulement : elle se retire quand on descend, elle revient dès qu'on remonte. TROIS RÈGLES TENUES DANS TOUT LE FICHIER ------------------------------------------------------------------------- A. AU REPOS, TOUT EST VISIBLE. Rien ici ne masque un contenu tant que le script n'a pas posé la classe « sc2-on » sur la balise . Sans JavaScript, sans GSAP, ou si le script tombe en panne, la page reste exactement celle d'aujourd'hui. Un site sans animation reste un site. B. ON N'ANIME QUE « transform » ET « opacity ». Aucun filter, aucun backdrop-filter, aucun flou, aucun content-visibility : chacun d'eux a déjà fait ramer ce site. C. AUCUN « will-change ». Posé partout, il réserve de la mémoire vidéo pour des éléments qui ne bougent pas et coûte plus qu'il ne rapporte. PRÉFIXE : tout ce qui est inventé ici commence par « sc2- » ou « sc2__ », ou passe par un attribut « data-sc2-… ». Vérifié le 01/08 : aucun de ces noms n'existe dans style.css, premium.css, palette.css, anim-sections.css, galerie.css, raccord.css ni scroll-plus.css. ========================================================================= */ /* ========================================================================= 1. LES PHOTOS — LE VOLET QUI SE LÈVE ------------------------------------------------------------------------- Concerne la bande de cinq photos de l'accueil et de la page méthode (.ben__ph .ph) et la photo de la page contact (.ct__ph). ⚠ LE SÉLECTEUR EST VOLONTAIREMENT « .ben__ph .ph » ET NON « .ph ». Dans ce site, « .ph » désigne DEUX choses différentes (c'est écrit noir sur blanc dans premium.css) : le cadre des photos de métiers, et le surligné jaune des champs à compléter des mentions légales et de la confidentialité. Écrire « .ph » tout court poserait un volet jaune sur ces surlignés. La galerie de la page exemples n'est PAS concernée : elle a sa propre arrivée en cascade, livrée dans galerie.js. On n'y touche pas. Le principe : la photo est là, entière, dès le départ. Ce qui la cache, c'est un rectangle de la couleur du cadre vide — un volet — qui se lève vers le haut quand la photo entre à l'écran. On ne révèle donc pas une image « qui apparaît » : on vide son cadre. ========================================================================= */ /* Le cadre devient le repère du volet et du plan interne, et il est TOUJOURS opaque : c'est le point important de tout le fichier. La photo elle-même n'est jamais masquée, seul le volet la couvre. Si le script s'arrête net, on voit la photo. « transition:none » sur l'opacité : sans cela le cadre hériterait de la transition d'apparition de style.css et le volet lui-même mettrait une demi-seconde à devenir visible au chargement. */ html.sc2-on .ben__ph .ph, html.sc2-on .ct__ph{ position:relative; opacity:1; transform:none; transition:none; } /* La photo de contact n'a pas de fond à elle ; on lui donne celui des autres cadres pour que le volet ait exactement la même couleur. */ html.sc2-on .ct__ph{ background:var(--paper); } /* LE VOLET. « background:inherit » : il reprend au pixel près le fond du cadre. */ html.sc2-on .ben__ph .ph::after, html.sc2-on .ct__ph::after{ content:''; position:absolute; inset:0; z-index:2; background:inherit; transform:translateY(0); transition:transform .92s var(--e-out); pointer-events:none; } /* … et il se lève. 101 % et non 100 % : à certains niveaux de zoom, un arrondi de sous-pixel laissait une ligne claire d'un pixel en haut. */ html.sc2-on .ben__ph .ph.sc2-vu::after, html.sc2-on .ct__ph.sc2-vu::after{ transform:translateY(-101%); } /* L'IMAGE QUI SE POSE. Elle arrive un peu trop grande et revient à sa taille pendant que le volet se lève. Deux mouvements de vitesses différentes dans le même cadre : c'est ce décalage qui donne l'impression de profondeur, et non le zoom tout seul. Le zoom reste faible (10 %) — au-delà, on voit une image qui « gonfle », ce qui est le défaut des sites d'agence. */ html.sc2-on .ben__ph .ph img, html.sc2-on .ct__ph img{ transform:scale(1.1); transition:transform 1.15s var(--e-out); } html.sc2-on .ben__ph .ph.sc2-vu img, html.sc2-on .ct__ph.sc2-vu img{ transform:scale(1); } /* Le grossissement au survol existait déjà dans style.css (.ph:hover img). Comme on écrit maintenant une transformation sur cette même image, il faut le redonner ici, sinon il serait perdu. Un seul propriétaire par propriété : c'est le CSS qui possède l'échelle de l'image, le script ne la touche jamais — il ne déplace que le plan qui la porte. */ html.sc2-on .ben__ph .ph.sc2-vu:hover img{ transform:scale(1.06); } /* LE PLAN INTERNE — le support du glissement et de l'éventail. Ce est créé par le script autour de chaque image. Il déborde de 7 % en haut et en bas du cadre, qui masque le débordement : le script peut donc le faire glisser verticalement sans jamais découvrir de bord. Sans script, ce n'existe pas et rien ne change. ⚠ 7 % ET NON 5 % comme dans scroll-plus : l'éventail donne à certaines photos une amplitude jusqu'à 1,3 fois la valeur de base, soit 5,9 % au plus fort. La marge doit rester au-dessus. */ .sc2__pl{ display:block; position:absolute; left:0; right:0; top:-7%; bottom:-7%; } /* ========================================================================= 2. LES MOTS-CLÉS QUI SE SOULIGNENT AU PASSAGE ------------------------------------------------------------------------- À poser sur un groupe de mots COURT (deux à cinq mots, sur une seule ligne) : prix ferme. Le trait est tracé de la gauche vers la droite quand la phrase arrive à l'écran, comme un trait de crayon sous une ligne qu'on veut retenir. AU REPOS LE TRAIT EST DÉJÀ TRACÉ : sans script, on voit un mot souligné, ce qui est exactement le résultat voulu. Le script ne fait que le remettre à zéro pour pouvoir le dessiner. « data-sc-mark » (l'ancien nom, celui de scroll-plus) est accepté lui aussi : si ces attributs ont déjà été écrits quelque part dans les pages, ils continuent de fonctionner sans qu'on ait à les renommer. ========================================================================= */ [data-sc2-mark], [data-sc-mark]{ position:relative; white-space:nowrap; /* le trait suit une ligne, jamais deux */ } [data-sc2-mark]::after, [data-sc-mark]::after{ content:''; position:absolute; left:0; right:0; bottom:-.14em; height:2px; border-radius:2px; background:var(--gold); transform:scaleX(1); transform-origin:0 50%; } /* sous « sc2-on », le trait part de rien et se trace */ html.sc2-on [data-sc2-mark]::after, html.sc2-on [data-sc-mark]::after{ transform:scaleX(0); transition:transform .75s var(--e-out); } html.sc2-on [data-sc2-mark].sc2-vu::after, html.sc2-on [data-sc-mark].sc2-vu::after{ transform:scaleX(1); } /* sur les sections foncées, la variante claire de l'accent */ .sec--dark [data-sc2-mark]::after, .sec--dark [data-sc-mark]::after{ background:var(--gold-l); } /* Sur un petit écran, la phrase peut devenir plus large que la colonne : on relâche le « nowrap », et le trait passe sous la première ligne seulement. C'est acceptable, et cela vaut mieux qu'un texte qui déborde. */ @media (max-width:560px){ [data-sc2-mark], [data-sc-mark]{white-space:normal} } /* ========================================================================= 3. LE FILET DE CHAPITRE (nouveau) ------------------------------------------------------------------------- Un trait d'un pixel, posé au-dessus d'un en-tête de section marqué « data-sc2-trait », qui se trace de la gauche vers la droite quand la section arrive. C'est le geste le plus discret du lot : il dit « nouveau chapitre » sans rien ajouter à la page. AU REPOS LE TRAIT EST DÉJÀ TRACÉ, comme pour les mots-clés : sans script, on voit un filet de séparation, ce qui est un résultat correct en soi. Le trait est posé en « absolute » 22 px au-dessus du bloc : il ne participe pas à la mise en page et ne peut donc rien décaler. ========================================================================= */ [data-sc2-trait]{ position:relative; } [data-sc2-trait]::before{ content:''; position:absolute; left:0; right:0; top:-22px; height:1px; background:var(--line); transform:scaleX(1); transform-origin:0 50%; pointer-events:none; } html.sc2-on [data-sc2-trait]::before{ transform:scaleX(0); transition:transform 1.05s var(--e-out); } html.sc2-on [data-sc2-trait].sc2-vu::before{ transform:scaleX(1); } /* sur fond foncé, un filet clair très discret */ .sec--dark [data-sc2-trait]::before{ background:rgba(255,255,255,.18); } /* ========================================================================= 4. L'EN-TÊTE QUI S'ESCAMOTE (nouveau, petit écran seulement) ------------------------------------------------------------------------- Au-dessus de 900 px de large, RIEN NE CHANGE : la barre reste toujours affichée, comme aujourd'hui. En dessous, elle se retire quand on descend et revient dès qu'on remonte d'un cheveu. Sur un téléphone, cela rend 58 px de hauteur au texte, ce qui est la seule vraie raison de faire cet effet. ⚠ LA TRANSITION EST RÉÉCRITE EN ENTIER, ET C'EST VOLONTAIRE. style.css déclare « transition:padding-top .5s » sur .hdr. Si on se contentait d'écrire « transition:transform … » ici, cette transition-là serait effacée et l'en-tête ne se resserrerait plus au défilement. On réécrit donc LES DEUX. Si un jour la ligne de style.css change, il faut recopier la nouvelle valeur ici. ========================================================================= */ @media (max-width:900px){ html.sc2-on .hdr{ transition:padding-top .5s var(--e-out),transform .42s var(--e-out); } html.sc2-on.sc2-hdr-cache .hdr{ transform:translateY(-140%); } } /* Le menu déroulant ouvert : la barre ne peut pas partir, elle le porte. */ html.sc2-on.sc2-hdr-cache .hdr:focus-within{ transform:none; } /* ========================================================================= 5. LA COLONNE QUI TIENT SA PLACE PUIS REPART ------------------------------------------------------------------------- Sur la page contact, la colonne de gauche (coordonnées + photo) est beaucoup plus courte que le formulaire. Marquée « data-sc2-tenir », elle retient sa place pendant qu'on descend dans le formulaire, puis repart normalement. On garde les coordonnées sous les yeux au moment où on remplit ses champs. Le script mesure lui-même la place disponible sous la colonne : s'il n'y en a pas (écran étroit, colonne unique), il ne fait rien du tout. Aucune valeur n'est écrite ici : tout est calculé, il n'y a donc rien à régler. ========================================================================= */ [data-sc2-tenir]{ /* rien au repos : l'élément est à sa place naturelle */ } /* ========================================================================= 6. LE VOILE DE LA SECTION NOIRE, ET LES DEUX GLISSEMENTS ------------------------------------------------------------------------- Le voile posé sur la vidéo d'atelier (.pb__veil), le plan des photos (.sc2__pl) et la page dessinée des démonstrations (.exc__pg) sont pilotés directement par le script, à chaque image de défilement. Il n'y a volontairement AUCUNE règle CSS pour eux, et SURTOUT PAS une transition : la valeur est réécrite à chaque image, et une transition posée dessus obligerait le navigateur à interpoler en permanence entre deux valeurs qui ont déjà changé. Le script écrit, le navigateur affiche. Le contraste du texte de la section noire reste très largement suffisant : le voile ne s'ouvre que de 14 % au maximum, et seulement au centre. ========================================================================= */ /* ========================================================================= 7. LES FILETS DE SÉCURITÉ ------------------------------------------------------------------------- Des classes posées par les scripts du site quand quelque chose s'est mal passé. Chacune doit rendre ce fichier totalement inoffensif. .js-off — aucun script utilisable (loader.js et main.js) .an-off — les animations de section ont abandonné (anim-sections.js) .sc2-off — ce script-ci a constaté un blocage et a tout remis à plat ⚠ « reveals-off » N'EST VOLONTAIREMENT PAS DANS CETTE LISTE, et ce n'est pas un oubli. Tant que le filet de main.js n'est pas corrigé (voir _a-integrer/scroll2.md), cette classe tombe 1,6 s après CHAQUE chargement. S'y raccrocher reviendrait à éteindre l'arrivée des photos avant même qu'on ait défilé jusqu'à elles. ========================================================================= */ html.js-off .ben__ph .ph::after, html.js-off .ct__ph::after, html.an-off .ben__ph .ph::after, html.an-off .ct__ph::after, html.sc2-off .ben__ph .ph::after, html.sc2-off .ct__ph::after{ content:none; } html.js-off .ben__ph .ph img, html.js-off .ct__ph img, html.an-off .ben__ph .ph img, html.an-off .ct__ph img, html.sc2-off .ben__ph .ph img, html.sc2-off .ct__ph img{ transform:none; } html.js-off [data-sc2-mark]::after, html.js-off [data-sc-mark]::after, html.an-off [data-sc2-mark]::after, html.an-off [data-sc-mark]::after, html.sc2-off [data-sc2-mark]::after, html.sc2-off [data-sc-mark]::after{ transform:scaleX(1); } html.js-off [data-sc2-trait]::before, html.an-off [data-sc2-trait]::before, html.sc2-off [data-sc2-trait]::before{ transform:scaleX(1); } html.js-off .hdr, html.an-off .hdr, html.sc2-off .hdr{ transform:none; } /* ========================================================================= 8. MOUVEMENT RÉDUIT ------------------------------------------------------------------------- Quelqu'un qui a demandé « moins d'animations » dans son système voit un site strictement immobile : tout est en place, rien ne se transforme. Le script sort de lui-même dans ce cas ; ces règles sont la ceinture en plus de la bretelle. ========================================================================= */ @media (prefers-reduced-motion:reduce){ html.sc2-on .ben__ph .ph::after, html.sc2-on .ct__ph::after{content:none} html.sc2-on .ben__ph .ph img, html.sc2-on .ct__ph img, html .sc2__pl{transform:none !important;transition:none !important} [data-sc2-mark]::after, [data-sc-mark]::after{transform:scaleX(1) !important;transition:none !important} [data-sc2-trait]::before{transform:scaleX(1) !important;transition:none !important} [data-sc2-tenir]{transform:none !important} html.sc2-on .hdr{transform:none !important} } /* ========================================================================= 9. IMPRESSION ========================================================================= */ @media print{ html.sc2-on .ben__ph .ph::after, html.sc2-on .ct__ph::after{content:none} html.sc2-on .ben__ph .ph img, html.sc2-on .ct__ph img{transform:none} [data-sc2-mark]::after, [data-sc-mark]::after{display:none} [data-sc2-trait]::before{display:none} [data-sc2-tenir]{transform:none !important} }