Istnieje kilka animacji przewijania, które są możliwe w CSS bez żadnego JavaScript. Wystarczy spojrzeć na rozdział dotyczący wskaźnika przewijania, który jest wyraźnie magią CSS. Ale możemy wykonać wiele animacji przewijania bezpośrednio w CSS, używając tylko jednej małej informacji dostarczonej przez JavaScript: jak daleko przewinęła się strona.
Więc usuńmy to z drogi. Za pomocą jednowierszowego kodu JavaScript możemy ustawić niestandardową właściwość CSS, która określa procent przewinięcia strony:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Teraz mamy --scrollwartość, której możemy użyć w CSS.
Ta sztuczka pochodzi od Scotta Kelluma, który jest mistrzem sztuczek CSS!
Skonfigurujmy animację bez użycia tej wartości na początku. To jest prosta animacja obracania elementu SVG, który będzie się obracał i obracał w nieskończoność:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Oto sztuczka! Zatrzymajmy teraz tę animację. Zamiast animować go w pewnym okresie czasu, będziemy animować go za pomocą pozycji przewijania, dostosowując podczas animation-delayprzewijania strony. Jeśli animation-durationjest 1s, oznacza to przewijanie całej długości strony. to jedna iteracja animacji.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Spróbuj zmienić animation-durationTO 0.5s. To pozwala na dwie animacje, które można uzupełnić animation-delaymatematyką.
Scott zauważył w swoim oryginalnym demo, że również ustawienie:
animation-iteration-count: 1; animation-fill-mode: both;Uwzględniono pewne „przeregulowane” dziwactwa i mogę zaświadczyć, że też to widziałem, szczególnie na krótkich rzutniach, więc warto je też ustawić.
Scott ustawił również właściwości animacji związane z przewijaniem na samym :root ()sobie, co oznacza, że może kontrolować wszystkie animacje na stronie jednocześnie. Oto jego demo, które kontroluje jednocześnie trzy animacje: