/** * reveal.css — pojawianie się elementów przy przewijaniu. * * KOMPONENT (nie base.css): mechanika stanów (opacity, transform, przejście, * kaskada) należy do jednego pliku, który mówi, czym jest i skąd się bierze; * base.css to reset, typografia i 20 klas układu. Para do assets/js/reveal.js, * który przełącza atrybut data-dc-reveal i nic więcej. * * DEKLARATYWNIE, JEDEN ARKUSZ: sekcja oznacza korzeń atrybutem * data-dc-reveal (całość wjeżdża), a kontener kart atrybutem * data-dc-reveal-group (dzieci wjeżdżają kaskadą). Żadna sekcja nie ma * własnych reguł wjazdu — dwadzieścia sekcji z własnymi regułami to * dwadzieścia miejsc do poprawki. * * KTO CHOWA I KIEDY. Ukrycie działa WYŁĄCZNIE pod html.dc-reveal — flagą, * którą stawia jednolinijkowy skrypt w (functions.php), przed * pierwszym malowaniem, i tylko gdy jest IntersectionObserver i nie ma * prefers-reduced-motion. Bez JS flagi nie ma → wszystko widać od razu; * z JS elementy zajmują miejsce od początku (opacity, nie display), więc * układ nie skacze. * * ZMIERZONE W MAKIECIE (home.html 1185–1204; product.html i starter-kit.html * identycznie): translateY(26px) → 0, opacity .6s ease + transform .65s * cubic-bezier(.2,.7,.2,1), próg 0.1 z rootMargin -6 % dołu, opóźnienia * sąsiadów 80 / 100 / 120 / 160 / 200 / 240 ms, „już w oknie" (top < 96 % * vh) bez wjazdu, siatka bezpieczeństwa 2,8 s. * * CO WZIĘTE, GDZIE NIŻEJ: * - odległość 26 px → --dc-space-16 (16 px): „delikatne wpłynięcie, * nie animacja" — 26 px przy sekcji o wysokości ekranu czyta się jako * ruch całej strony; 16 to tyle, ile trzeba, żeby oko zauważyło * kierunek; * - czas .6 / .65 s → --dc-duration-slower + --dc-duration-base (0,55 s) * dla obu właściwości — makietowe wartości scalone do tokenów * (reguła 15), o 50–100 ms krócej: z krótszą drogą krótszy czas * utrzymuje tę samą prędkość; * - krzywa: opacity ease (--dc-ease), transform cubic-bezier(.2,.7,.2,1) * = --dc-ease-out co do cyfry; * - krok kaskady 80 ms → --dc-duration-fast / 2 (75 ms); numer w kaskadzie * (--dc-reveal-index) nadaje reveal.js WYŁĄCZNIE elementom, które * przecięły próg w tym samym wywołaniu obserwatora — przy 390 px karty * wchodzą pojedynczo, więc bez czekania; * - próg, rootMargin i „już w oknie" — bez zmian (reveal.js). * * Zero wartości zahardkodowanych. Jedyna liczba to `0` w `--dc-reveal-index` * (brak numeru = brak opóźnienia). */ /* ========================================================================== 1. STAN OCZEKIWANIA — tylko pod flagą html.dc-reveal Dzieci grupy są chowane selektorem na kontener, ZANIM skrypt nada im atrybut — inaczej mignęłyby między pierwszym malowaniem a DOMContentLoaded. ========================================================================== */ .dc-reveal [data-dc-reveal=''], .dc-reveal [data-dc-reveal-group] > :not([data-dc-reveal]) { opacity: 0; transform: translateY(var(--dc-space-16)); } /* ========================================================================== 2. WJAZD Przejście deklarowane na stanie docelowym, nie na oczekującym: element, który skrypt oznaczy "now" (nad zgięciem), nie dostaje przejścia w ogóle. ========================================================================== */ .dc-reveal [data-dc-reveal='in'] { opacity: 1; transform: none; transition: opacity calc(var(--dc-duration-slower) + var(--dc-duration-base)) var(--dc-ease), transform calc(var(--dc-duration-slower) + var(--dc-duration-base)) var(--dc-ease-out); transition-delay: calc(var(--dc-reveal-index, 0) * var(--dc-duration-fast) / 2); } .dc-reveal [data-dc-reveal='now'] { opacity: 1; transform: none; } /* ========================================================================== 3. BEZ RUCHU — reduced motion i druk Flagi wtedy nie ma (skrypt w sprawdza to samo zapytanie), ale zapis zostaje: ustawienie systemowe może zmienić się po wczytaniu strony, a wydruk nie ma przewijania, które by cokolwiek odsłoniło. ========================================================================== */ @media (prefers-reduced-motion: reduce), print { .dc-reveal [data-dc-reveal], .dc-reveal [data-dc-reveal-group] > * { opacity: 1; transform: none; transition: none; } }