/* * FDMaker — ruch na stronie * --------------------------------------------------------------------------- * Jeden pomysł przewodni: strona zachowuje się jak wydruk. Treść nie „wlatuje" * z boków ani nie skacze — narasta od dołu, warstwa po warstwie, a każdy blok * podkreśla cienka kreska akcentu, która przejeżdża w poprzek jak dysza. * * Zasady, których się tu trzymamy: * 1. Tylko transform i opacity. Nic, co zmusza przeglądarkę do przeliczania * układu strony w trakcie animacji — dzięki temu jest płynnie na telefonie. * 2. Krótko. 420–700 ms. Animacja ma być zauważona kątem oka, nie oglądana. * 3. Ruch startuje dopiero, gdy JavaScript doda na klasę „js-motion". * Bez skryptu strona wygląda normalnie i cała treść jest widoczna — * to warunek, żeby nie zniknęła np. dla wyszukiwarek. * 4. Kto ma w systemie ograniczony ruch, dostaje stronę bez animacji. */ :root { --ease-out: cubic-bezier(.16, .84, .44, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); } /* =========================================================================== 1. Odsłanianie przy przewijaniu =========================================================================== */ /* * Stan wyjściowy nakładamy wyłącznie, gdy skrypt zdążył się wykonać * (klasa na ) i tylko na elementy, które sam oznaczył. Gdyby skrypt * padł, żaden z tych warunków nie zajdzie i treść zostaje na ekranie. */ .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js-motion [data-reveal].is-in { opacity: 1; transform: none; } /* po zakończeniu zdejmujemy podpowiedź dla przeglądarki, żeby nie trzymała warstwy */ .js-motion [data-reveal].is-done { will-change: auto; } /* nagłówek sekcji dochodzi odrobinę dalej — to on prowadzi wzrok */ .js-motion [data-reveal='head'] { transform: translate3d(0, 26px, 0); } /* obrazki i bryły dodatkowo delikatnie się zbliżają */ .js-motion [data-reveal='figure'] { transform: translate3d(0, 22px, 0) scale(.985); transition-duration: .7s; } .js-motion [data-reveal='figure'].is-in { transform: none; } /* =========================================================================== 2. Kreska akcentu pod tytułem sekcji --------------------------------------------------------------------------- Przejeżdża od lewej do prawej, gdy tytuł wchodzi w kadr. Skala zamiast szerokości, bo skala nie przelicza układu strony. =========================================================================== */ .js-motion .title, .js-motion .display { position: relative; } .js-motion .title[data-rule]::after, .js-motion .display[data-rule]::after { content: ''; position: absolute; left: 0; bottom: -.45rem; width: 3.5rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-out) .18s; } .js-motion .title[data-rule].is-in::after, .js-motion .display[data-rule].is-in::after { transform: scaleX(1); } /* =========================================================================== 3. Pasek postępu czytania --------------------------------------------------------------------------- Cienka linia u samej góry, rośnie wraz z przewijaniem. Odpowiednik paska postępu wydruku i jedyny element, który towarzyszy przez całą stronę. =========================================================================== */ /* * Nazwa „readbar", nie „progress" — ta druga jest już zajęta przez pasek * postępu do darmowej dostawy w koszyku (app.css). Wspólna nazwa robiła * z tamtego paska przyklejoną do góry ekranu kreskę. */ .readbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; background: transparent; } .readbar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; } /* =========================================================================== 4. Nagłówek strony =========================================================================== */ /* po odjechaniu od góry belka lekko się zagęszcza i odcina cieniem */ .masthead { transition: box-shadow .35s var(--ease-soft), background-color .35s var(--ease-soft); } .masthead.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 10px 30px -22px rgba(0, 0, 0, .45); background: color-mix(in srgb, var(--paper) 96%, transparent); } .masthead__inner { transition: padding .35s var(--ease-soft); } .masthead.is-stuck .masthead__inner { padding-top: .55rem; padding-bottom: .55rem; } /* podkreślenie pozycji menu wyjeżdża spod tekstu */ .nav > a { position: relative; } .nav > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .3s var(--ease-out); } .nav > a:hover::after, .nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .nav > a[aria-current='page']::after { transform: scaleX(1); background: var(--accent); height: 2px; } /* =========================================================================== 5. Wejście strony --------------------------------------------------------------------------- Pierwszy ekran nie czeka na przewijanie — pojawia się od razu po wczytaniu, z niewielkim opóźnieniem między wierszami nagłówka a resztą. =========================================================================== */ .js-motion .hero > * { animation: enter .7s var(--ease-out) both; } .js-motion .hero > *:nth-child(2) { animation-delay: .1s; } @keyframes enter { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } } /* * Zdjęcie na pierwszym ekranie oddycha — bardzo powoli i o ułamek procenta. * Na tyle mało, że nie da się tego złapać wzrokiem wprost, ale kadr przestaje * być martwy. Zatrzymuje się pod kursorem, żeby nie przeszkadzać w klikaniu. */ .js-motion .hero__figure img { animation: drift 26s var(--ease-soft) infinite; } .js-motion .hero__figure:hover img { animation-play-state: paused; } @keyframes drift { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } } /* =========================================================================== 6. Reakcje na kursor =========================================================================== */ /* kafelki produktów podnoszą się i mocniej odcinają */ .card, .hero__figure { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .card:hover, .hero__figure:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .5); } /* przyciski dociskają się przy kliknięciu — potwierdzenie, że trafiło */ .btn { transition: transform .16s var(--ease-out), background-color .2s, border-color .2s, color .2s; } .btn:active { transform: translateY(1px); } /* strzałki w odnośnikach wysuwają się w stronę celu */ .arrow { display: inline-block; transition: transform .25s var(--ease-out); } a:hover > .arrow, .arrow:hover { transform: translateX(4px); } /* wiersze tabel i list podświetlają się miękko */ .spectable tr, .summary__row { transition: background-color .2s var(--ease-soft); } /* pola formularza reagują na wejście kursorem, nie dopiero na kliknięcie */ .field input, .field select, .field textarea { transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft); } /* =========================================================================== 7. Liczby, które doliczają --------------------------------------------------------------------------- Cyfry w zestawieniach dobijają do wartości docelowej, gdy wejdą w kadr. Samą wartość podmienia skrypt; tutaj tylko pilnujemy, żeby zmiana liczby znaków nie rozjeżdżała układu. =========================================================================== */ [data-count] { font-variant-numeric: tabular-nums; } /* =========================================================================== 8. Zmiana podstrony --------------------------------------------------------------------------- Krótkie przygaszenie przy wychodzeniu ze strony zszywa nawigację w całość zamiast białego mignięcia. Tylko dla zwykłych przejść — nie dla formularzy, pobierania plików i odnośników otwieranych w nowej karcie. =========================================================================== */ /* * Wypełnienie „backwards", nie „both". Przy „both" przeglądarka trzyma * przezroczystość z ostatniej klatki animacji już na zawsze, a deklaracje * animacji biją w kaskadzie zwykłe reguły — klasa wygaszająca nie miałaby * wtedy żadnego wpływu. „backwards" działa tylko przed startem animacji. */ .js-motion body { animation: page-in .32s var(--ease-out) backwards; } .js-motion body.is-leaving { opacity: 0; transition: opacity .18s var(--ease-soft); } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } /* =========================================================================== 9. Wyłącznik --------------------------------------------------------------------------- Ustawienie „ogranicz ruch" w systemie wyłącza wszystko powyżej. Treść zostaje na swoim miejscu i jest od razu widoczna. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .js-motion [data-reveal], .js-motion [data-reveal].is-in { opacity: 1; transform: none; transition: none; } .js-motion .title[data-rule]::after, .js-motion .display[data-rule]::after { transform: scaleX(1); transition: none; } .js-motion .hero > *, .js-motion .hero__figure img, .js-motion body { animation: none; } .js-motion body.is-leaving { opacity: 1; } .card:hover, .hero__figure:hover, .btn:active, a:hover > .arrow { transform: none; } .readbar { display: none; } * { scroll-behavior: auto !important; } }