/** * Pohyb — animácie eshopu. * * Zámerne malý súbor a zámerne málo animácií. Prehnaný pohyb je rovnaký podpis * generovaného dizajnu ako vyhladená tvár je podpis generovanej fotky, takže sa * tu hýbe iba to, čo niečo vysvetľuje alebo potvrdzuje akciu. * * Všetko rešpektuje `prefers-reduced-motion` na konci súboru. Nie je to len * prístupnosť — časť ľudí má z pohybu na stránke fyzickú nevoľnosť a nastavenie * si zapla práve preto. */ /* ------------------------------------------------------------------ * * NFC vlna * * Celý produkt stojí na tom, že hosť priloží telefón k tabuľke. Táto animácia * to povie za dve sekundy bez jediného slova, takže je z celého súboru * najhodnotnejšia. * * Vlny sa nehýbu, iba pulzujú v postupnosti — pohyb smerom von vzniká * oneskorením, nie posunom. Je to pokojnejšie a nerozptyľuje to od textu vedľa. * ------------------------------------------------------------------ */ .tk-nfc { display: block; width: 100%; max-width: 168px; height: auto; color: var(--tk-indigo); } .tk-nfc__body { stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .tk-nfc__wave { stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: .16; animation: tk-nfc-pulse 2.1s ease-in-out infinite; } .tk-nfc__wave--2 { animation-delay: .24s; } .tk-nfc__wave--3 { animation-delay: .48s; } @keyframes tk-nfc-pulse { 0%, 62%, 100% { opacity: .16; } 28% { opacity: 1; } } /* ------------------------------------------------------------------ * * Odhalenie pri scrollovaní * * Trieda `tk-reveal` sa dáva do šablóny, `is-visible` pridáva motion.js cez * IntersectionObserver. Bez JS zostane prvok viditeľný — preto je počiatočný * stav definovaný až pod `.js-motion`, ktorú skript nasadí na . * * Oneskorenie sa nastavuje inline premennou `--tk-reveal-delay`, aby sa dala * odstupňovať trojica kariet bez ďalších tried. * ------------------------------------------------------------------ */ .js-motion .tk-reveal { opacity: 0; transform: translateY(14px); } .js-motion .tk-reveal.is-visible { opacity: 1; transform: none; transition: opacity .5s ease-out var(--tk-reveal-delay, 0s), transform .5s ease-out var(--tk-reveal-delay, 0s); } /* ------------------------------------------------------------------ * * Nadvihnutie karty * * Dva pixely a tieň. Zámerne bez `scale` — zväčšenie na hover je jeden * z najčastejšie rozpoznávaných znakov generovaného rozhrania. * ------------------------------------------------------------------ */ .tk-lift { transition: transform .18s ease-out, box-shadow .18s ease-out; } .tk-lift:hover, .tk-lift:focus-within { transform: translateY(-2px); /* Tieň má odtieň navy, nie čiernu. Čierna odsýti podklad pod kartou. */ box-shadow: 0 6px 18px rgba(10, 26, 53, .10); } /* ------------------------------------------------------------------ * * Krok aktivácie * * Vyplnenie kruhu pri prechode KÓD → CIEĽ → HOTOVO. Potvrdzuje akciu, ktorú * človek práve urobil, takže to nie je dekorácia. * ------------------------------------------------------------------ */ .tk-step__dot { transition: background-color .22s ease-out, border-color .22s ease-out; } /* ------------------------------------------------------------------ * * Vypnutie pohybu * * Musí byť posledné, aby prebilo všetko vyššie. * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .tk-nfc__wave { animation: none; opacity: .55; } .js-motion .tk-reveal, .js-motion .tk-reveal.is-visible { opacity: 1; transform: none; transition: none; } .tk-lift { transition: none; } .tk-step__dot { transition: none; } }