Fazendo animações CSS usando uma folha de sprite

As animações da web podem ser usadas de várias maneiras para chamar a atenção para certos recursos de um site ou aplicativo de uma forma visualmente estimulante.

Por exemplo, quando você seleciona o botão do balão de fala no canto inferior direito do site da LogRocket, o balão de fala muda para uma seta para baixo com uma animação giratória que adiciona um floreio extra à interação do usuário.

As animações também podem ser usadas puramente decorativamente para tornar o uso do site mais divertido e esteticamente atraente para o usuário, como na página de destino de um site que, de outra forma, usaria uma imagem estática ou teria um espaço em branco.

Não importa para que você esteja usando animação, existem diferentes maneiras de implementar animações da web.

Pré-requisitos

• Editor de código, por exemplo Codepen
• HTML básico
• Conhecimento básico de CSS, em particular a propriedade animation e consultas @media
• Software de edição de imagens, por exemplo, Figma ou Adobe Photoshop

Criação de uma folha de sprite e animações usando CSS

Neste post, vou cobrir como criar sua própria folha de sprite e animá-la usando CSS. É um método legal de aprender e, de fato, muitos sites e aplicativos populares usam folhas de sprite para animar as funções do usuário.

Na verdade, o Twitter usa uma folha de sprite para animar seu botão de coração, que se enche e explode com confetes quando você gosta de um tweet. Neste tutorial, criaremos um gráfico simplificado de uma janela do Terminal com o texto “hello” digitado.

É assim que vai ficar:

Criando a folha de sprite na Figma

Para começar, abra o editor de imagens de sua escolha. Gosto de usar o Figma porque é gratuito e você também pode usá-lo no navegador como Adobe Photoshop, Illustrator ou qualquer ressurreição do MS Paint!

Eu escolhi projetar o gráfico em sua maior escala para uma tela de desktop para que possa torná-lo menor em telas de tablets e celulares em vez de projetá-lo para a tela menor e estendê-lo para uma tela maior.

Vamos criar um espaço de trabalho do tamanho de um desktop (1440px x 1024px). Observe que cada quadro da animação será uma imagem deste tamanho.

A seguir, crie o gráfico desenhando um grande retângulo cinza escuro para a janela do Terminal. Em seguida, adicione um retângulo cinza claro na parte superior da barra de ferramentas e adicione três círculos cinza na barra de ferramentas para os botões. Seu gráfico básico do Terminal deve ser parecido com este até agora:

A próxima etapa é mapear o quadro final, que conterá o texto completo que você deseja e onde no gráfico você deseja que ele vá. Escolhi usar a fonte monoespaçada Roboto Mono para que as letras fiquem com o mesmo tamanho e espaçamento. Digitei a palavra “olá” e criei um retângulo para o cursor de texto. Era assim:

Agora você precisará criar cada quadro da animação e salvar cada um como uma imagem separada. Começarei com um quadro que mostra apenas o cursor de texto no Terminal e, em seguida, moverei-o para a direita conforme digito cada letra de cada quadro. Isso criará seis quadros no total.

Depois de ter cada quadro, você pode adicioná-los todos em um arquivo de imagem de folha de sprite. Usei uma ferramenta CSS Sprites Generator , selecionando preenchimento de 0px entre os elementos e alinhando esquerda-direita.

Meu arquivo sprites baixado era assim:

Animando a folha de sprite

Agora é hora de adicionar a animação da folha de sprite à sua página da web. Comece adicionando um

.terminal { altura: 1024px; largura: 1440px; plano de fundo: url ("https://i.imgur.com/zLh2Pgs.png");
}

 @keyframes sprite { de {posição de fundo: 0px; } para {posição de fundo:-8640px; }
}

.terminal { ... nome-da-animação: sprite; duração da animação: 1,5s; função de tempo de animação: etapas (6); animação-iteração-contagem: infinito;
}

 @keyframes sprite { para {posição de fundo:-8640px; }
} .terminal { altura: 1024px; largura: 1440px; plano de fundo: url ("https://i.imgur.com/zLh2Pgs.png"); animação: sprite 1.5s etapas (6) infinito;
}

.terminal { ... transformar: traduzir (-25%,-25%) escala (0,5);
} @media only screen e (min-width: 1024px) { .terminal { transformar: escala (1); }
}