Adicionar animações da interface do usuário ao seu site

Sep 14, 2025

Como

A maioria das pessoas vê interfaces de usuário diariamente, seja dentro de um aplicativo móvel ou em um site, por isso é importante acertar ao criá-los (um Construtor de sites vai tornar isso simples para você), e se você pode agradá-los com alguns Animação CSS. , tudo do melhor.

Explore a nova fronteira da animação CSS

Ao construir para a web, particularmente quando se trata de animação, você tem que considerar coisas como suporte e desempenho do navegador (decente hospedagem na web. vai ajudar aqui). Neste tutorial, vamos guiá-lo através de duas das melhores soluções para criar animações e transições da UI.

Nós estaremos usando uma combinação de CSS e Greensock. (Gsap). Estamos todos conscientes do CSS, mas alguns de vocês podem não estar cientes da plataforma Greensock. Greensock é uma estrutura JavaScript que permite criar animações impressionantes com elementos HTML usando apenas algumas linhas de código.

Imagens e logotipos se destacaram em muito mais nos últimos anos. Quantas vezes usamos emojis em vez de texto? As navegações móveis parecem usar ícones em vez de texto e ao longo do tempo, os usuários vêm para saber onde cada um vai nos levar. Vamos começar criando uma barra de navegação animada apenas usando logotipos. Quando você passa o mouse sobre cada um, ele vai animar para o estado final, que será semelhante a esta captura de tela. Tem muita mídia para adicionar? Apoiá-lo em armazenamento na núvem .

UI animations: icons — Nós temos os seis ícones de navegação e um deles mostra o que o estado de Hover parecerá assim que a animação estiver concluída

Construir a navegação

Primeiro de tudo, criaremos um novo arquivo index.html e configuraremos nossa área de navegação junto com seis links. Cada link será composto de um ícone retirado de ionicons. Precisamos atribuir uma aula a cada um.

 & lt; div classe = "navegaçãobar" & gt;
& lt; a href = "#" class = "navlogo ion-ios-star-outline" & gt; & lt; / a & gt;
& lt; a href = "#" classe = "navlogo ion-ios-list-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-chatboxes-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-outline-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-engrenagem-esboço" & gt; & lt; / a & gt;
& lt; / div & gt;

Nós não estaremos cobrindo o documento completo de HTML ou CSS em detalhes, mas você pode Obtenha a listagem de código completo do GitHub .

Em seguida, precisaremos criar um arquivo CSS que seja chamado Style.css e insira a seguinte linha de código para importar ionicons:

 @Import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Vamos agora configurar a aula Navlogo para nossas imagens de navegação dentro da folha de estilo. Aqui vamos configurar a posição, altura, tamanho da fonte etc.

 .navlogo {
  Posição: Relativo;
  Tamanho da fonte: 40px;
  Largura: 75px;
  Margem: 40px;
  Altura: 75px;
  Altura da linha: 75px;
  Exibir: bloco inline;
  cor: #fff;
}

.navlogo: depois de {
  Posição: Absoluto;
  top: 0;
  fundo: 0;
  Esquerda: 0;
  Direita: 0;
  fronteira: 2px sólido # E6E6E6;
  contente: '';
  Z-index: -1;
  raio de fronteira: 50%;
}

Em seguida, precisamos configurar a animação para o nosso .navlogo. elemento. Aqui vamos criar os efeitos de rotação e transição, bem como alterar a cor do elemento no Hover.

 .navlogo: antes,
.navlogo: depois de {
  -webkit-transition: todos os 0.45s facilidade;
  Transição: Todos os 0.45s facilitam-out;
}
.navlogo: pairar,
.navlogo: ativo,
.navlogo.hover {
  Cor: # C0392B;
}
.navlogo: Hover: depois,
.navlogo: ativo: depois,
.navlogo.hover: depois de {
  Cor da fronteira: transparente # C0392B;
  -webkit-transform: girar (360DEG);
  Transformar: girar (360DEG);
}

Finalmente, precisaremos adicionar um evento que remova a classe HOVER quando o mouse não estiver mais pairando sobre nossos logotipos. Isso é para se certificar de que nosso logotipo sai de sua animação. Crie um novo arquivo JavaScript chamado Main.JS e insira o seguinte código:

 $ (". Hover"). MouseSeave (
  função () {
    $ (isto) .Removeclass ("Hover");
  }
);

Nossa navegação agora está pronta para ir, além de adicionar alguns hiperlinks. Conseguimos conseguir isso apenas usando o CSS3.

Criar e animar botões na carga

UI animations: animated buttons — Os botões aparecerão um por um com um atraso um segundo entre. Greensock permite que você faça isso com qualquer elemento HTML

Vamos agora adicionar quatro botões à nossa página e usar a biblioteca Greensock para trazer lentamente cada botão, um após o outro com um atraso de um segundo. Isso criará um bom efeito de transição.

Primeiro, precisaremos reabrir o arquivo index.html e criar nossa seção de botão usando o código abaixo:

 & lt; div id = "Butteraea" & gt;
& lt; Botão Classe = "Anibutton" & GT; alterar o fundo do fundo & lt; / Button & GT;
& lt; Button Class = "Anibutton" & GT; opção 1 & lt; / Button & GT;
& lt; Button Class = "Anibutton" & GT; Opção 2 & Lt; / Button & GT;
& lt; Button Class = "Anibutton" & GT; opção 3 & lt; / Button & GT;
& lt; / div & gt;

Precisamos então configurar uma referência à biblioteca Greensock dentro do & lt; Head & GT; seção.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweweMax.min.js" & gt; & lt; / script & gt;

Finalmente, precisamos configurar nossa animação. Isso só levará uma linha de código. Stoggerfrom. é uma função que vai escalonar a hora de início do nosso elemento. Em nossos colchetes, especificamos o nome do elemento. Neste caso, seria .Anibutton. . Também precisamos definir uma duração e, neste caso, é definido para um segundo entre cada Anibutonte elemento.

 tweenmax.staggerfrom ('. Anibutton', 1, {opacidade: 0}, 1);

Transição de cor de fundo e elemento

UI animations: colour transition — É assim que a interface do usuário cuidará da transição de fundo e botão de uma cor para outra

A próxima coisa que vamos olhar está transitando o fundo do site e os botões de uma cor para outra. Muitas vezes não encontramos esse recurso em sites, embora definitivamente seja interessante para coisas como acessibilidade ou para preferências de aplicativos da Web quando o usuário pudesse desejar definir seu próprio esquema de cores.

Certifique-se de que você tenha uma cor de fundo e uma borda e cor de texto configuradas para sua página no arquivo Style.css.

 .anibutton {
Fronteira: 2px sólido # 000;
cor: # 000;
}

Em seguida, criaremos uma função JavaScript para configurar nossas várias transições de cores Greensock.

 ChangeBackground da função ()
{
   Tweenmax.to ("corpo", 3, {backgroundimage: "gradiente linear (para a esquerda, # 646580, # 212121)"});
   Tweenmax.to ("Anibutton", 3, {cor: "# FFF"});
   Tweenmax.to (". Anibutton", 3, {fronteira: "2px sólido #fff"});
}

Estamos indo para mais um modo escuro olhar aqui, então o fundo será escuro, mas os botões aparecerão à luz. A primeira linha de código alterará a cor de fundo para uma variação mais escura durante um período de três segundos. A segunda e terceira linha mudará a cor e a borda do texto para branco durante um período de três segundos.

Finalmente, precisaremos chamar o mude o fundo() Função de um dos nossos botões encontrados no arquivo index.html.

 & lt; Botão Classe = "Anibutton" OnClick = "Changebackground ()" & gt; Alterar fundo & lt; / botão & gt;

O projeto está agora pronto para ser executado. Claro, você pode ir muito mais adicionando novos elementos e mudando o estilo de cor para aqueles também.

Este artigo foi originalmente publicado em questão 309 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 309 aqui ou Inscreva-se aqui .

Artigos relacionados:

Animar e alternar títulos com CSS
5 dicas para CSS super rápidos
Uma introdução às propriedades personalizadas CSS

Adicionar animações da interface do usuário ao seu site

Construir a navegação

Criar e animar botões na carga

Transição de cor de fundo e elemento

Como - Artigos mais populares

Como fazer uma captura de tela em um Mac

Criar estilos e layouts CSS específicos Quantidade

Criar um efeito de texto de vapor animado

Adicione um efeito de glitch ao seu site

Como esculpir os olhos convincentes no Zbrush

Comece com tela HTML

Criar um chuveiro de meteoro em 3ds max

Crie ilustrações simples para a web

Categorias