Animação de Scroll com CSS puro
Fala Dev, Bem vindo(a) ao Code Kong, seu destino online para explorar o vasto universo da programação e design web! Hoje, vamos mergulhar em uma fascinante jornada pelo reino da Animação de Scroll usando nada menos que puro CSS. Prepare-se para desvendar os segredos por trás de transições suaves, efeitos cativantes e movimentos fluidos que antes eram exclusividade do JavaScript, mas agora podem ser alcançados de maneira elegante e eficaz utilizando apenas as poderosas ferramentas do CSS.
Vamos falar sobre uma novidade muito interessante que está chegando ao CSS: a propriedade animation-timeline. Essa propriedade permite que você controle a animação de um elemento em relação ao scroll da página ou à posição da viewport. Isso abre um leque de possibilidades para criar efeitos visuais dinâmicos e interativos com o CSS.
A propriedade animation-timeline aceita dois valores: scroll() e view(). O valor scroll() indica que a animação deve ser sincronizada com o scroll da página, ou seja, a animação avança ou retrocede conforme o usuário rola a página para cima ou para baixo. O valor view() indica que a animação deve ser sincronizada com a posição da viewport, ou seja, a animação depende de onde o elemento está na tela.
Além disso, a propriedade animation-timeline aceita alguns parâmetros que permitem ajustar o comportamento da animação. Por exemplo, você pode definir o range da animação, ou seja, em que ponto do scroll ou da viewport a animação começa e termina. Você também pode definir o fill mode da animação, ou seja, como o elemento deve ficar antes e depois da animação. E você pode definir o time mode da animação, ou seja, se a animação deve ser linear ou proporcional ao scroll ou à viewport.
Vamos ver alguns exemplos de como usar a propriedade animation-timeline com os valores scroll() e view().
No vídeo abaixo, temos um exemplo simples de como implementar tanto os valores scroll() e view()
O link para baixar esse código completo está no botão abaixo!
Vamos analisar os pontos mais importantes desse código que é onde estão as novas própriedades CSS.
.background{
position: fixed;
padding: 0;
margin: 0;
top:0;
width: 100%;
height: 100vh;
background-image: url(../img/fundo.webp);
background-size: cover;
animation: back;
animation-timeline: scroll();
}.background: Este é o seletor que está apontando para um elemento com a classe “background”. As regras de estilo definidas dentro deste bloco serão aplicadas a este elemento.
position: fixed;: Esta propriedade posiciona o elemento em relação à janela do navegador. Isso significa que o elemento ficará no mesmo lugar mesmo se a página for rolada.
padding: 0;emargin: 0;: Estas propriedades removem todas as margens e preenchimentos do elemento, respectivamente.
top:0;: Esta propriedade define a posição do topo do elemento como 0. Isso significa que o elemento será posicionado no topo da janela do navegador.
width: 100%;eheight: 100vh;: Estas propriedades definem a largura e a altura do elemento, respectivamente. A largura é definida como 100% da largura do elemento pai, enquanto a altura é definida como 100% da altura da janela de visualização (viewport).
background-image: url(../img/fundo.webp);: Esta propriedade define a imagem de fundo do elemento. A imagem está localizada no diretório “img” que está um nível acima do diretório atual.
background-size: cover;: Esta propriedade define o tamanho da imagem de fundo para garantir que o elemento de fundo esteja completamente coberto pela imagem de fundo.
animation: back;: Esta propriedade define o nome da animação que deve ser definida em algum lugar em seu CSS usando a regra@keyframes.
animation-timeline: scroll();: Esta linha indica que a animação será controlada pela rolagem da página.
@keyframes back{
0%{
opacity: 100%;
}100%{
opacity: 33%;
}
}@keyframes back: Esta é a definição da animação chamada “back”. A animação será aplicada ao elemento com a classe “background”.
0%{ opacity: 100%; }: No início da animação (0%), a opacidade do elemento será 100% (completamente visível).
100%{ opacity: 33%; }: No final da animação (100%), a opacidade do elemento será 33% (parcialmente transparente).
No exemplo acima, trabalhamos com animation-timeline: scroll(); agora vamos usar a própriedade view() para animar as imagens:
.img1{
animation: goku 1ms ease-in-out both;
animation-timeline: view();
animation-range: entry 10% cover 70%;
}.img1: Este é o seletor que está apontando para um elemento com a classe “img1”. As regras de estilo definidas dentro deste bloco serão aplicadas a este elemento.animation: goku 1ms ease-in-out both;: Esta é uma propriedade de atalho para várias propriedades de animação. Aqui está o que cada valor significa:goku: Este é o nome da animação que deve ser definida em algum lugar em seu CSS usando a regra@keyframes.1ms: Este é o tempo que a animação levará para completar uma iteração.ease-in-out: Este é o timing function que controla a aceleração intermediária da animação.both: Este é o valor da propriedadeanimation-fill-modeque controla o que acontece antes e depois da animação. O valorbothsignifica que a animação irá aplicar os estilos do primeiro quadro de animação antes de começar e reter os estilos do último quadro de animação após o término.
animation-timeline: view();: Esta linha indica que a animação será controlada pela visibilidade do elemento na área de visualização. A animação começará quando o elemento entrar na área de visualização.
animation-range: entry 10% cover 70%;: Esta é uma propriedade experimental que permite controlar quando a animação deve começar e terminar em relação à linha do tempo. Aqui está o que cada valor significa:entry 10%: Isso significa que a animação começará quando o elemento estiver 10% visível na área de visualização.cover 70%: Isso significa que a animação terminará quando o elemento tiver coberto 70% da área de visualização.
@keyframes goku{
0%{
translate: -90vw 0;
margin-top: 400px;
}
100%{
translate: 0vw 0;
margin-top: 100px;
}
}@keyframes goku: Esta é a definição da animação chamada “goku”. A animação será aplicada ao elemento com a classe “img1”.
0%{ translate: -90vw 0; margin-top: 400px; }: No início da animação (0%), o elemento será transladado -90vw no eixo x (movido para a esquerda) e a margem superior será de 400px.
100%{ translate: 0vw 0; margin-top: 100px; }: No final da animação (100%), o elemento será transladado 0vw no eixo x (não movido) e a margem superior será de 100px.
Por favor, note que as propriedades animation-timeline e animation-range ainda são experimentais e podem não ser suportadas em todos os navegadores. Recomendo verificar a compatibilidade do navegador antes de usar em produção. Além disso, esses exemplos são simplificados para fins de demonstração e podem precisar de ajustes para funcionar como esperado em um projeto real.
Muito obrigado por acessar ao nosso site, não esqueça de dar o seu feedback, isso é muito importante para sabermos se estamos no caminho certo e ajudará ainda mais a compartilhamos conhecimentos com vocês.
