Постоје неке анимације помицања које су могуће у ЦСС-у без икаквог ЈаваСцрипт-а. Само погледајте поглавље о индикатору помицања, што је очито ЦСС магија. Али можемо да радимо пуно послова са анимацијом помицања директно у ЦСС-у, са само мало информација које пружа ЈаваСцрипт: колико је страница скролала.
Па, макнимо то са пута. Помоћу ЈаваСцрипт једнослојне линије можемо поставити прилагођено својство ЦСС-а које зна проценат скролисане странице:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);
Сада имамо --scroll
као вредност коју можемо користити у ЦСС-у.
Овај трик долази путем Сцотта Келлума који је прави ЦСС мајстор трикова!
Подесимо анимацију без употребе те вредности у почетку. Ово је једноставна анимација окретања за СВГ елемент који ће се вртјети и вртјети заувијек:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )
Ево трика! Сада паузирамо ову анимацију. Уместо да га анимирамо током одређеног временског периода, анимираћемо га преко положаја помицања прилагођавањем animation-delay
како се страница помера. Ако animation-duration
је 1с, то значи померање целе дужине странице. је једна итерација анимације.
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); )
Покушајте да промените animation-duration
у 0.5s
. То омогућава две анимације које се могу употпунити animation-delay
математиком.
Скот је приметио у свом оригиналном демо-у који такође поставља:
animation-iteration-count: 1; animation-fill-mode: both;
Објашњавао сам неке „прекорачене“ необичности и могу потврдити да сам и то видео, посебно на кратким приказима, па је вредно поставити и ове.
Скот је такође на себе подесио својства анимације везане за помицање :root ()
, што значи да може одједном да контролише све анимације на страници. Ево његове демонстрације која истовремено контролише три анимације: