/* ============================================================ SPIS TRESCI - animations.css (animacje wejscia on-scroll, bez biblioteki) 1. KEYFRAMES WEJSC (revele) 2. MECHANIZM WEJSC - IntersectionObserver (reveal.js) + keyframes 3. SCRUB - progresywny dodatek CSS scroll-driven (tylko dekoracje) 4. REDUKCJA RUCHU ------------------------------------------------------------ Uzycie: atrybut data-anim="..." na elemencie. Katalog: REVELE: fade | fade-up | fade-down | fade-left | fade-right | zoom | rise | blur-up | flip-up | rotate-in | mask-reveal SCRUB: parallax | parallax-fast | scale-scrub Modyfikator: data-anim-delay="200" (ms, stagger; reveal.js przepisuje go na animation-delay, fill backwards trzyma stan startowy w czasie delayu). Kiedy co: - REVELE = tresc, ktora ma dojsc do pozycji z Figmy piksel w piksel (naglowki, karty, obrazy). Stan koncowy = design. - SCRUB = elementy DEKORACYJNE (tlo, ksztalty), ktore dryfuja wraz ze scrollem. NIE dawac na tresc pixel-perfect. Dziala tylko w silnikach z animation-timeline (w praktyce Chrome); gdzie indziej element stoi. - mask-reveal (clip-path) stosowac ostroznie, dopiero gdy baza sekcji jest stabilna; domyslny bezpieczny zestaw to fade / fade-up / fade-left / fade-right / zoom. Jak to dziala (mechanizm glowny = IntersectionObserver, nie scroll-driven): - reveal.js dodaje klase wb-anim na ; DOPIERO ona chowa elementy. Brak JS, brak IO albo prefers-reduced-motion = nic nie jest chowane. - Wejscie robi ANIMACJA keyframes w klasie .anim-in (nie transition), BEZ fill forwards. Dzieki temu nie nadpisujemy transition elementu (hovery przyciskow dzialaja), a po animacji element wraca do stanu naturalnego, wiec filled animation nie blokuje transformow z :hover. - Replay tylko w dol: reveal.js zdejmuje .anim-in wylacznie gdy element wyszedl calkowicie POD viewport. Scroll w gore niczego nie odtwarza. - Animujemy transform + opacity (dla blur-up/mask-reveal takze filter / clip-path). Zero layout-shift: nie ruszamy width/height/margin. - Testowanie: TYLKO realny front albo plik otwarty w prawdziwej przegladarce. Kanwa edycyjna Pinegrow nie wykonuje scrolla/JS, a edytor Gutenberga celowo zeruje data-anim (editor.css). ============================================================ */ /* === 1. KEYFRAMES WEJSC === */ @keyframes wb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wb-fade-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } } @keyframes wb-fade-down { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: none; } } @keyframes wb-fade-left { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } } @keyframes wb-fade-right { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: none; } } @keyframes wb-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes wb-rise { from { opacity: 0; transform: translateY(3.5rem); } to { opacity: 1; transform: none; } } @keyframes wb-blur-up { from { opacity: 0; transform: translateY(2rem); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes wb-flip-up { from { opacity: 0; transform: perspective(800px) rotateX(12deg); } to { opacity: 1; transform: perspective(800px) rotateX(0); } } @keyframes wb-rotate-in { from { opacity: 0; transform: rotate(-4deg) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes wb-mask-reveal { from { opacity: 0.001; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* === 2. MECHANIZM WEJSC (IntersectionObserver + keyframes) === */ /* Chowanie wylacznie pod html.wb-anim (dodaje reveal.js). */ html.wb-anim [data-anim] { opacity: 0; } /* Stan widoczny: element ujawniony przez IO oraz scrub (dekoracja, ktorej nie chowamy - jej ruch robi sekcja 3, nie wejscie). */ html.wb-anim [data-anim].anim-in, html.wb-anim [data-anim="parallax"], html.wb-anim [data-anim="parallax-fast"], html.wb-anim [data-anim="scale-scrub"] { opacity: 1; } /* Wejscia: keyframes bez fill forwards (backwards trzyma stan startowy w czasie animation-delay, po koncu element wraca do stanu naturalnego). */ html.wb-anim [data-anim="fade"].anim-in { animation: wb-fade .7s ease-out backwards; } html.wb-anim [data-anim="fade-up"].anim-in { animation: wb-fade-up .7s ease-out backwards; } html.wb-anim [data-anim="fade-down"].anim-in { animation: wb-fade-down .7s ease-out backwards; } html.wb-anim [data-anim="fade-left"].anim-in { animation: wb-fade-left .7s ease-out backwards; } html.wb-anim [data-anim="fade-right"].anim-in { animation: wb-fade-right .7s ease-out backwards; } html.wb-anim [data-anim="zoom"].anim-in { animation: wb-zoom .7s ease-out backwards; } html.wb-anim [data-anim="rise"].anim-in { animation: wb-rise .8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } html.wb-anim [data-anim="blur-up"].anim-in { animation: wb-blur-up .8s ease-out backwards; } html.wb-anim [data-anim="flip-up"].anim-in { animation: wb-flip-up .8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } html.wb-anim [data-anim="rotate-in"].anim-in { animation: wb-rotate-in .7s ease-out backwards; } html.wb-anim [data-anim="mask-reveal"].anim-in { animation: wb-mask-reveal .8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } /* === 3. SCRUB: progresywny dodatek (dryf sterowany scrollem, bez JS) === */ @keyframes wb-parallax { from { transform: translateY(-2rem); } to { transform: translateY(2rem); } } @keyframes wb-parallax-fast { from { transform: translateY(-4rem); } to { transform: translateY(4rem); } } @keyframes wb-scale-scrub { from { transform: scale(0.94); } to { transform: scale(1.04); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-anim="parallax"], [data-anim="parallax-fast"], [data-anim="scale-scrub"] { animation-timeline: view(); animation-range: cover 0% cover 100%; animation-timing-function: linear; animation-fill-mode: both; } [data-anim="parallax"] { animation-name: wb-parallax; } [data-anim="parallax-fast"] { animation-name: wb-parallax-fast; } [data-anim="scale-scrub"] { animation-name: wb-scale-scrub; } } } /* === 4. REDUKCJA RUCHU === */ /* reveal.js przy reduce nie dodaje wb-anim; ta regula domyka reszte (np. reduce wlaczone po zaladowaniu strony). */ @media (prefers-reduced-motion: reduce) { html.wb-anim [data-anim], html.wb-anim [data-anim].anim-in { opacity: 1; animation: none; } [data-anim="parallax"], [data-anim="parallax-fast"], [data-anim="scale-scrub"] { animation: none; } }