Existem algumas animações de rolagem que são possíveis em CSS sem nenhum JavaScript. Basta olhar para o capítulo sobre o indicador de rolagem, que é claramente a mágica do CSS. Mas podemos fazer muito trabalho de animação de rolagem diretamente em CSS com apenas um pouco de informação fornecida pelo JavaScript: até que ponto a página rolou.
Então, vamos tirar isso do caminho. Com um JavaScript one-liner, podemos definir uma propriedade personalizada CSS que conhece a porcentagem da página rolada:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Agora temos --scrollcomo valor que podemos usar no CSS.
Esse truque vem por meio de Scott Kellum, que é um verdadeiro mestre em truques CSS!
Vamos configurar uma animação sem usar esse valor no início. Esta é uma animação giratória simples para um elemento SVG que girará e girará para sempre:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Aí vem o truque! Agora vamos pausar esta animação. Em vez de animá-lo por um período de tempo, vamos animá-lo por meio da posição de rolagem, ajustando o animation-delayconforme a página rola. Se animation-durationfor 1s, significa rolar por toda a extensão da página. é uma iteração da animação.
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); ) Tente alterar o animation-durationpara 0.5s. Isso permite que duas animações possam ser concluídas com a animation-delaymatemática.
Scott observou em sua demonstração original que também definia:
animation-iteration-count: 1; animation-fill-mode: both;Foi responsável por algumas estranhezas de “overshoot” e posso atestar que também vi isso, especialmente em viewports curtas, então vale a pena defini-las também.
Scott também definiu as propriedades de animação relacionadas à rolagem no :root ()próprio, o que significa que ele poderia controlar todas as animações na página de uma vez. Aqui está sua demonstração que controla três animações simultaneamente: