Building Blocks

Scroll Animations

Por muito tempo, era necessário o uso de JavaScript para realizar animações com scroll. Felizmente, o animation-timeline: scroll() chegou e permite interações de scroll utilizando apenas CSS.

Alguns navegadores ainda não são compatíveis com essa funcionalidade. Confira a lista de navegadores compatíveis aqui.

Aqui, nesse site, repare que os conteúdos a seguir surgem conforme o usuário desce a página; além disso, há uma barra de progressão no cabeçalho, que apresenta o quanto da página está sendo visto.

Nesse site, a animação de surgimento de conteúdos é desativada se o usuário possui prefers-reduced-motion ativado em seu navegador.

Hover Animations

A propriedade hover é comumente usada para prover um feedback ao usuário. Ao passar o mouse por cima de um elemento, o usuário sabe que pode interagir com ele:

ClareiaMuda a cor
DiminuiAumenta

Você pode conferir mais efeitos com hover aqui