/* ============================================================================= motion.css — WEJŚCIE ELEMENTÓW, WARSTWA KRYCIA PODZIAŁ PRZEBIEGA PO WŁAŚCIWOŚCI, ale TYLKO W TRYBIE PRZEWIJANYM. Tam arkusz rusza samo `opacity`, a `transform` należy do GSAP-a; rozdział jest szczelny, bo dwie animacje na tej samej właściwości nadpisują się nawzajem bez ostrzeżenia. Nad zgięciem CAŁE wejście robi arkusz, oba ruchy naraz, i to jest poprawka po pomiarze. Ruch nad zgięciem był przez chwilę u GSAP-a i widać było, co z tego wychodzi: krycie startuje, gdy przeglądarka doczyta arkusz, a `ruch` dopiero po `load`, bo klasyfikacja potrzebuje ustabilizowanego układu. Tytuł najpierw się pojawiał, a chwilę później dojeżdżał — dwa etapy zamiast jednego. Wstępne wczytanie biblioteki tego nie leczy, bo to nie jest wyścig o bajty, tylko o zdarzenie: `load` przychodzi po `load`, choćby GSAP leżał w pamięci podręcznej. Nad zgięciem nie ma zresztą po co sięgać po bibliotekę: to jedno przejście na zegarze, które CSS robi natywnie i w tej samej klatce co krycie. DWA TRYBY, ROZSTRZYGANE PRZEZ `motion.js`. Element widoczny przy wczytaniu wchodzi na zegarze — nie ma na co czekać, patrzysz na niego. Element poniżej zgięcia dostaje klasę `.foreto-wejscie--scroll` i wchodzi przy przewijaniu. Zegar jest DOMYŚLNY, a przełącza się to, co niżej — nie odwrotnie. Odwrotnie znaczyłoby mignięcie w najgorszym miejscu: element nad zgięciem leży poza zakresem osi przewijania, więc narysowałby się w pełnym kryciu i dopiero potem skoczył do zera. Uzasadnienie w całości siedzi w `motion.js`. PRÓG W JEDNOSTKACH EKRANU, NIE W PROCENTACH ZAKRESU — to było źródłem dwóch nieudanych podejść. Procent fazy `cover` liczy się od wysokości elementu PLUS wysokość okna, więc ten sam zapis znaczy co innego dla nagłówka 112 px i karty 658 px. Zmierzone przy `cover 5% 25%`: pełne krycie osiągane, gdy górna krawędź jest na 67-75% wysokości okna, czyli w dolnej ćwiartce, do której nikt nie patrzy. `15vh` i `40vh` mówią wprost: zacznij, gdy górna krawędź jest na 85% wysokości okna, skończ przy 60%. Ta sama droga niezależnie od wysokości elementu — sprawdzone na 112, 424 i 658 px. `animation-duration: auto` jest OBOWIĄZKOWE: przy osi przewijania czasem animacji jest droga, a nie sekundy, i zostawione 700 ms zmieściłoby całe wejście w ułamku zakresu. Faza `cover`, nie `entry`: `entry` dla elementu niższego od okna trwa dokładnie tyle, ile jego wysokość, więc całe wyłanianie zmieściłoby się przy dolnej krawędzi i skończyło, zanim element dojedzie w pole widzenia. `.foreto-reveal-box` dopisany po sprawdzeniu, a nie po założeniu: przez dwie iteracje trzymałem go poza listą jako komponent „z własnym wejściem", bo tak zapamiętałem. Nie ma żadnego — jego przejścia to `flex-grow` i `border-color`, czyli wewnętrzna harmonijka, która z pojawianiem się nie ma nic wspólnego. Pasmo faktów i oś czasu mają swoje naprawdę (`foreto-facts-in`, `foreto-timeline-in`) i te zostają poza listą — sprawdzone tym samym pomiarem. CZEGO TU NIE MA: nagłówek, stopka, okruszki i hero. Są nawigacją albo stoją nad zgięciem od pierwszej klatki, a nawigacja ma być na miejscu, zanim ktoś jej poszuka. Nagłówek podstrony ma własne wejście — `.foreto-enter`. PASMO CTA WCHODZI TREŚCIĄ, NIE SOBĄ — dlatego na liście stoi `.foreto-cta__inner`, a nie `.foreto-cta`. Pasmo nie ma odstępu do sąsiada: jego tło dotyka bloku obok bez marginesu, więc ruszane w całości wchodzi na ten blok, a przy częściowym kryciu przepuszcza go na wierzch. Zmierzone na `/blog/`, gdy ruszało się całe pasmo: zachodzenie na stopkę równało się co do piksela przesunięciu — 38 px ruchu to 38 px nachodzenia, przy kryciu 0,14. Czerwona kreska stopki przecinała wyblakłe pasmo, a pod nią zostawał pasek tła, które zjechało za nisko. Treść ma dokąd się ruszyć, bo wewnątrz pasma jest dopełnienie. Krawędzie zostają nieruchome, a wchodzi to, co się czyta — czyli to, co i tak miało wchodzić. Ta sama zasada obowiązuje każde następne pasmo pełnej szerokości: na liście stoi jego wnętrze, nigdy ono samo. ============================================================================= */ /* Nad zgięciem: krycie i ruch w jednej klatce, więc z definicji zgodne. */ @keyframes foreto-wejscie { from { opacity: 0; transform: translateY(var(--foreto-space-2)); } to { opacity: 1; transform: none; } } /* Przy przewijaniu: samo krycie. `transform` zostaje wolny dla GSAP-a, który daje tam 40 px zamiast ośmiu — na czterystu pikselach drogi osiem pikseli jest niewidoczne, zmierzone 1,4%. */ @keyframes foreto-wejscie-krycie { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* LISTA IDZIE PO KLASIE BAZOWEJ, nie po wariantach. `.foreto-card` nosi każda karta usług, produktów, segmentów, opinii i osób — sprawdzone na siedmiu szablonach, wszędzie komplet: 6/6, 3/3, 5/5, 7/7. Wypisywanie wariantów osobno nic nie dodawało, a gwarantowało, że następny wariant wejdzie na stronę bez wejścia i nikt tego nie zauważy. `.foreto-case` stoi osobno, bo klasy bazowej NIE nosi ani razu — 0/4, 0/3, 0/9. To nie jest karta z tej rodziny, tylko własny komponent. `.foreto-post` dopisany po zgłoszeniu: karty wpisów na blogu nie miały wejścia w ogóle, bo lista opisywała warianty kart, a wpis do tej rodziny nie należy. Ta sama luka dotyczyła `.foreto-kv` i `.foreto-contact-person`. TEKST TEŻ WCHODZI — i to jest naprawa luki, nie rozszerzenie zakresu. Lista wyliczała KOMPONENTY, więc akapit, lista i akordeon nie miały wejścia w ogóle: sekcja z nagłówkiem i kartami pojawiała się, a proza obok stała. Wchodzi GRUPA, nie pojedyncze zdanie — kolumna tekstu to jedna myśl, a nie trzy osobne rzeczy do policzenia. Grupa jest zawężona do wnętrza sekcji: `main` też jest `wp-block-group` i bez tego zawężenia wchodziłaby cała strona naraz. ZAWĘŻENIE IDZIE PRZEZ `:where()`, i to nie jest ozdoba składni. Zwykły `.foreto-section__inner .wp-block-group` waży dwie klasy i przebija `.foreto-wejscie--scroll` niżej, który waży jedną — grupa zostawała wtedy przy wejściu ZEGAROWYM, czyli odgrywała się przy załadowaniu strony, choć stała pięć ekranów niżej. Zmierzone: `animation-name: foreto-wejscie`, `animation-timeline: auto`, krycie 1 przy scrollu 0. `:where()` zeruje wagę zawężenia, więc o wyniku znów decyduje kolejność w pliku, tak jak przy pozostałych pozycjach listy. ZAGNIEŻDŻENIE ROZSTRZYGA REGUŁA, NIE LISTA WYJĄTKÓW. Poprzednia wersja twierdziła, że „nic się nie dubluje", i przestała być prawdziwa przy pierwszym komponencie, który stanął w drugim: kv w panelu roli, kv w karcie oferty, nagłówek sekcji w grupie podziału. Wejście wewnątrz wchodzącego rodzica to podwójny dystans i podwojone krycie — dziecko dojeżdża po tym, jak rodzic już stanął. Zamiast dopisywać wyjątki: cokolwiek z tej listy stoi wewnątrz czegoś z tej listy, traci własne wejście. Ruch niesie zawsze najbardziej zewnętrzny element, a lista może rosnąć bez sprawdzania kombinacji. */ .foreto-section-head, .foreto-card, .foreto-case, .foreto-post, .foreto-kv, .foreto-contact-person, .foreto-carousel, .foreto-reveal-box, .foreto-filterbar, .foreto-facets-box, .foreto-btn-group, .foreto-cta__inner, .foreto-icon-tile, .foreto-tech-tile, .foreto-trait-bar, .foreto-case-meta, .foreto-accordion, .foreto-prose, .kr-perk, .kr-offer, .kr-empty, .kr-stanowiska-box, .kr-form__intro, .kr-form__box, .of-head, .of-body, :where(.foreto-section__inner) .wp-block-group, :where(.foreto-section__inner) > .wp-block-paragraph, :where(.foreto-section__inner) > .wp-block-list { animation: foreto-wejscie 500ms ease-out both; animation-delay: var(--foreto-wejscie-d, 0ms); } :is( .foreto-section-head, .foreto-card, .foreto-case, .foreto-post, .foreto-kv, .foreto-contact-person, .foreto-carousel, .foreto-reveal-box, .foreto-filterbar, .foreto-facets-box, .foreto-btn-group, .foreto-cta__inner, .foreto-icon-tile, .foreto-tech-tile, .foreto-trait-bar, .foreto-case-meta, .foreto-accordion, .foreto-prose, .kr-perk, .kr-offer, .kr-empty, .kr-stanowiska-box, .kr-form__intro, .kr-form__box, .of-head, .of-body, :where(.foreto-section__inner) .wp-block-group, :where(.foreto-section__inner) > .wp-block-paragraph, :where(.foreto-section__inner) > .wp-block-list ) :is( .foreto-section-head, .foreto-card, .foreto-case, .foreto-post, .foreto-kv, .foreto-contact-person, .foreto-carousel, .foreto-reveal-box, .foreto-filterbar, .foreto-facets-box, .foreto-btn-group, .foreto-cta__inner, .foreto-icon-tile, .foreto-tech-tile, .foreto-trait-bar, .foreto-case-meta, .foreto-accordion, .foreto-prose, .kr-perk, .kr-offer, .kr-empty, .kr-stanowiska-box, .kr-form__intro, .kr-form__box, .of-head, .of-body, :where(.foreto-section__inner) .wp-block-group, :where(.foreto-section__inner) > .wp-block-paragraph, :where(.foreto-section__inner) > .wp-block-list ) { animation: none; } /* Stopniowanie liczone po rodzeństwie, nie po całym dokumencie: rząd kart ma wejść falą, a nie odliczać po kolei. Piąty i dalsze dostają to samo opóźnienie co czwarty — po czterech krokach oko i tak przestaje odróżniać kolejność, a dwanaście kart z pełnym stopniowaniem to ładowanie się strony po kawałku. Kroki skrócone razem z czasem wejścia i w tej samej proporcji: fala ma trwać ułamek pojedynczego wejścia, a nie własne życie. Przy 500 ms i kroku 60 ostatnia karta ruszała, gdy pierwsza była już w połowie — przy 40 ms cały rząd mieści się w jednym geście. */ .foreto-card:nth-child(2), .foreto-case:nth-child(2), .foreto-post:nth-child(2) { --foreto-wejscie-d: 40ms; } .foreto-card:nth-child(3), .foreto-case:nth-child(3), .foreto-post:nth-child(3) { --foreto-wejscie-d: 80ms; } .foreto-card:nth-child(n + 4), .foreto-case:nth-child(n + 4), .foreto-post:nth-child(n + 4) { --foreto-wejscie-d: 120ms; } @supports (animation-timeline: view()) { /* `linear`, nie odziedziczone `ease-out`. Przy animacji przypiętej do przewijania zegarem jest scroll, więc krzywa nałożona na wierzch rozjeżdża warstwy: zmierzone przy `ease-out` — krycie osiągało pełnię na 88% zakresu, gdy ruchowi zostawało jeszcze 4,7 px. Widać to jako dojeżdżanie elementu, który już przestał się pojawiać. */ /* ZAKRES SKRÓCONY OD OBU KOŃCÓW. `15vh`/`40vh` znaczyło: zacznij, gdy górna krawędź jest na 85% wysokości okna, skończ przy 60% — czyli element osiągał pełnię dopiero w środku ekranu i przez pół drogi czytało się go przez mgłę. `10vh`/`30vh` to start przy 90% i pełnia przy 70%: wejście dzieje się przy dolnej krawędzi, a treść stoi gotowa, zanim wzrok na nią trafi. Te dwie liczby są PRZEPISANE do `motion.js` jako `top 90%` i `top 70%`. Rozjazd znaczy krycie i ruch w innym tempie. */ .foreto-wejscie--scroll { animation-name: foreto-wejscie-krycie; animation-timeline: view(); animation-range: cover 10vh cover 30vh; animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; } } /* KARUZELA WCHODZI CAŁĄ TAŚMĄ, a nie kaflami — i to jest jedyny układ, który tu w ogóle działa. Tor ma `overflow-x: auto`, żeby dało się go przewinąć palcem. To czyni go kontenerem przewijania w OBU osiach (gdy jedna jest `auto`, druga przestaje być `visible`), a oś `view()` mierzy położenie właśnie względem najbliższego takiego kontenera. Kafel stoi w torze nieruchomo w pionie, więc jego postęp wynosiłby zero — czyli krycie zero, na zawsze. Opakowanie leży POZA torem i kontenerem przewijania nie jest: przy logotypach ma `clip`, przy referencjach `visible`. Liczy się więc względem dokumentu i wchodzi normalnie, zabierając kafle ze sobą. Kafle zostają wyłączone osobno, bo bez tego dostałyby wejście drugi raz, wewnątrz wchodzącego rodzica. */ .foreto-carousel .foreto-card, .foreto-carousel .foreto-case, .foreto-carousel .foreto-post { animation: none; } }