Сцролл Аниматион - ЦСС-трикови

Anonim

Постоје неке анимације помицања које су могуће у ЦСС-у без икаквог ЈаваСцрипт-а. Само погледајте поглавље о индикатору помицања, што је очито ЦСС магија. Али можемо да радимо пуно послова са анимацијом помицања директно у ЦСС-у, са само мало информација које пружа ЈаваСцрипт: колико је страница скролала.

Па, макнимо то са пута. Помоћу ЈаваСцрипт једнослојне линије можемо поставити прилагођено својство ЦСС-а које зна проценат скролисане странице:

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 (), што значи да може одједном да контролише све анимације на страници. Ево његове демонстрације која истовремено контролише три анимације: