5 demonstrações incríveis do CodePen: transições e animações CSS

Este tutorial ensinará 5 transições e efeitos de animação visualmente atraentes que você pode usar hoje. Bifurque as canetas, pratique os conceitos, leve seu CSS para o próximo nível!

Transições CSS

Vamos começar com algumas transições CSS; uma maneira fácil de alterar os valores das propriedades durante um período especificado. Essas transições ocorrem quando o valor de uma propriedade ou de um elemento é alterado, como quando um botão muda gradualmente de cor ou quando uma imagem é ampliada ao passar o mouse sobre ela. Os efeitos de transição podem ser controlados usando o transition propriedade, especificando a propriedade a ser transferida, a duração, a função de temporização e o atraso.

Transição deslizante deslizante CSS

Nosso primeiro exemplo demonstra o uso de transições CSS para criar um lindo efeito de revelação de cartão de imagem. As transições CSS são aplicadas a um .img-card class, dando-nos um efeito de transição suave ao passar o mouse sobre cada imagem.

Aqui está uma análise rápida:

• A estrutura HTML define a galeria de imagens contidas em um

  elemento. Cada uma das imagens também está incluída em um

  marcação. O estilo define a posição inicial de cada cartão de imagem para a esquerda (left: 0px;) e define suas outras propriedades.
• O transition propriedade com os valores (ease-in-out e 0.3s), especifica o efeito de transição suave quando o cartão passa o mouse no atraso de transição especificado.
• Há também um hover pseudoclasse no cartão de imagem que define a aparência do cartão de imagem quando passa o mouse sobre ele. Ele expande o cartão (flex: 2;) e adiciona um cursor para um efeito visualmente atraente.

Este é um ótimo exemplo para começar a usar transições CSS. À medida que avançamos neste tutorial, entraremos em demonstrações mais complexas do que esta.

Revelar imagem na rolagem

Tudo bem, próximo exemplo, e desta vez adicionaremos um pouco de JavaScript à mistura! A demonstração abaixo foi retirada do excelente tutorial de George Martsoukos:

Ele demonstra como criar um efeito marcante revelando imagens e conteúdo conforme o usuário rola a página para baixo. Imagens com efeito clip-path e sobreposição de fundo são gradualmente reveladas com o uso de uma transição CSS.

O JavaScript IntersectionObserver é utilizado para acionar a animação quando os elementos entram na janela de visualização.

Então, como George fez isso?

Na estrutura HTML, o reveal-section O elemento contém o conteúdo a ser revelado na rolagem e esta seção é estilizada usando CSS. A funcionalidade de revelação da imagem na rolagem foi realizada usando JavaScript. Veja como:

• .reveal-section estiliza a seção de revelação, definindo sua largura, margem e preenchimento máximos.
• .reveal-section .scroll estiliza o layout da grade para o conteúdo dentro da seção de revelação, criando um layout de duas colunas com uma lacuna de coluna.
• .reveal-section figure estiliza o contêiner da imagem, adicionando uma sombra de caixa e um efeito de transição de fundo.
• .reveal-section figure::before: a pseudoclasse “antes” adiciona uma sobreposição de fundo que faz a transição com um efeito de caminho de clipe quando revelada.
• .reveal-section figure img estiliza a imagem no elemento de figura e define um caminho de corte para o efeito de revelação.

• O trecho de código JavaScript configura um Intersection Observer para acionar a animação de revelação quando os elementos aparecem à medida que o usuário rola a página para baixo.

• Ele seleciona o elemento com a classe .reveal-section, .scrolle o elemento figure, que é o contêiner da imagem.
• A função de retorno de chamada do Intersection Observer adiciona a classe .is-animated para elementos que estão pelo menos 50% visíveis na viewport e remove a classe quando não estão. É isso que controla o fundo escuro para deslizar, revelar a imagem e deslizar para fora.

Portanto, se você rolar a página para cima e para baixo, a imagem será revelada gradualmente.

Animações CSS

Passando das transições, CSS animações oferecem ainda mais controle sobre as transformações dos elementos. Com animações, você pode criar quadros-chave que definem e interpolam entre diferentes estados de um elemento durante um determinado período. Isso permite efeitos visuais mais complexos e dinâmicos em comparação com transições.

Animação de empilhamento e desempilhamento de cartas

Vamos começar com um exemplo de como animações CSS podem ser usadas para criar um efeito de empilhamento e desempilhamento de cartões quando os usuários rolam para cima e para baixo em uma página da web. Taha Shashtari criou este lindo efeito de UI usando sua própria biblioteca Animate at JavaScript.

Algumas propriedades personalizadas CSS serão usadas para calcular propriedades de animação dinamicamente para flexibilidade e fácil personalização. O animation-timeline propriedade é usada para controlar a animação com base em eventos de rolagem.

Tente rolar para cima e para baixo nesta demonstração no modo de tela cheia para ver o efeito de empilhamento e desempilhamento em cada carta.

Veja como essa funcionalidade foi alcançada:

• As variáveis ​​CSS (definidas em :root) são usados ​​para definir as alturas, margens e outras propriedades do cartão.
• Os estilos básicos são aplicados ao corpo e ao cabeçalho da página para criar o layout. Os cartões também são estilizados para dar-lhes uma aparência de cartão.
• Agora, para criar a funcionalidade de empilhamento e desempilhamento, verifiquei o suporte do navegador usando @supports.
• A animação é controlada por propriedades personalizadas CSS (--index, --reverse-index, --reverse-index0etc.) e são calculados com base na posição do cartão na lista.
• A animação dimensiona cada elemento do cartão quando rolado, criando um efeito de “empilhamento” e “desempilhamento”. O @keyframes A regra define como a transformação da escala muda conforme a animação avança. Esse @keyframes palavra-chave é um conceito muito importante ao criar animações usando CSS.
• A duração e o atraso da animação são ajustados com base na posição da carta, criando um efeito disperso.

Bolhas Animadas

Agora é hora de uma demonstração um pouco diferente! Este código de Shruti Kapoor demonstra como criar um efeito de animação de bolhas flutuantes usando tela HTML e JavaScript requestAnimationFrame método. Clique em qualquer parte da tela azul para exibir as bolhas flutuantes.

Como Shruti criou esse efeito de animação de bolha?

• A estrutura HTML inclui um parágrafo () instruindo o usuário a clicar na tela; a elemento com o id “canvas” onde a animação será renderizada.
• O elemento canvas é estilizado para definir sua cor de fundo para combinar com a cor escura que usamos ao longo deste tutorial (mas você pode alterá-la para o que quiser) e garantir que ela seja dimensionada de forma responsiva à largura da janela.
• O código JavaScript inicializa a animação das bolhas. Uma classe “Bubble” é definida para representar cada bolha. Cada um com propriedades como posição, raio, cor e velocidade.
• O draw() O método da classe “Bubble” é responsável por renderizar cada bolha na tela. Ele usa o contexto de renderização 2D da tela para desenhar círculos com gradientes para criar círculos semelhantes a bolhas.
• O move() O método atualiza a posição de cada bolha, fazendo com que ela suba.
• Um ouvinte de evento de clique (canvas.addEventListener("click", handleDrawCircle)) aciona a criação de novas bolhas sempre que qualquer área da tela é clicada.
• O animate() A função limpa a tela e atualiza a posição de cada bolha, criando o efeito de animação. Ele usa o requestAnimationFrame método para otimizar o desempenho.

Esta animação com efeito de bolhas pode ser uma adição divertida às páginas da web. Você também pode criar animações como esta, mas com diferentes gráficos flutuantes, como balões, neve e assim por diante.

Veremos um último exemplo – uma página da web com rolagem paralaxe.

Página da Web de rolagem paralaxe

Então, o que exatamente é rolagem paralaxe?

A rolagem paralaxe é uma técnica de design de movimento em que os planos de fundo se movem mais lentamente do que o que está em primeiro plano. Dá uma sensação de profundidade e podemos usar isso em sites quando um usuário rola para baixo em uma página da web. Essa ilusão de profundidade adiciona um elemento interativo e visualmente atraente ao site. A rolagem paralaxe pode ser usada para envolver os usuários, aprimorar a narrativa e criar uma experiência de navegação mais envolvente.

W3Schools tem um ótimo tutorial explicando como a paralaxe pode ser implementada em uma página da web. Veja a demonstração abaixo em modo de tela cheia para obter a experiência de rolagem paralaxe.

Embora este possa não ser um exemplo complexo de animação CSS, ele se enquadra no conceito de web design de criação de efeitos visuais impressionantes em uma página da web.

A implementação típica da rolagem paralaxe é a seguinte:

• Primeiro, a página da web é dividida em diferentes camadas, cada camada contendo elementos diferentes. As camadas geralmente incluem imagens.
• O efeito de rolagem é criado conforme o usuário rola para cima e para baixo na página da web e as camadas de fundo se movem em velocidades diferentes em comparação com as camadas de primeiro plano.
• As camadas de fundo de movimento mais lento dão a ilusão de profundidade, como se o usuário estivesse olhando os objetos através de diferentes perspectivas.

Bifurque a caneta para brincar com suas próprias configurações e conteúdo de paralaxe!

Conclusão

Exploramos como as transições e animações CSS dão vida e profundidade aos elementos das páginas da web. Obrigado a todos os desenvolvedores talentosos cujo trabalho realizamos! Vimos como esses conceitos podem transformar páginas estáticas em páginas dinâmicas com experiências únicas.

Espero que você tenha gostado dessas demonstrações. Aumente o nível do seu jogo de animação usando CSS e JavaScript e lembre-se de mantê-lo no mínimo ao criar aplicativos da web completos. Boa codificação!