Criar Animações de UI Slick

Mais e mais frequentemente, os designers e desenvolvedores estão reconhecendo a importância do projeto de movimento no contexto de experiência de usuário . Animação na Web não é mais uma maneira de se deliciar e wow o usuário, mas uma ferramenta funcional que faz experiências fáceis, divertidas e memoráveis. E há uma série de diferentes ferramentas e abordagens disponíveis, de Animação CSS. para técnicas usando bootstrap ou html.

Animação no contexto das interfaces de usuário ainda é um campo muito novo. Não há muitos recursos lá fora que ensinam as melhores práticas ou mostram padrões comuns de animação de interface do usuário que podemos seguir. Na maioria das vezes, é sobre experimentação, Teste do usuário e talvez um pouco de tentativa e erro.

• 15 tutoriais responsivos do web design

Então, neste tutorial, vamos criar algo que não confunda, segue padrões comuns e é elegante. Esta será a seção Perfil da equipe que você freqüentemente vê nos sites da empresa. A ideia é mostrar um pouco mais de informações sobre o membro da equipe / equipe quando cada um é pairado. Ao longo do tutorial, estaremos usando codepen, mas é claro que você pode usar seu próprio editor favorito e ambiente de desenvolvimento. Lembre-se, criando um site mais complexo pode mudar seu hospedagem na web. Precisa, portanto, certifique-se de ter um serviço que funcione para você.

Você gostaria de uma ferramenta direta para fazer um site? Use um brilhante Construtor de sites .

01. Prepare-se

Comece abrindo o codepen e criando uma nova caneta. Vamos usar o Bootstrap 4 e o Sass (.scss), por isso, certifique-se de que dentro das configurações incluir o Bootstrap CSS e JS como seus links de recursos e também definir o CSS para SCSs. Outro link de recurso Você precisará adicionar é a fonte incrível, que usaremos para nossos ícones sociais.

02. Crie recipientes, linhas e colunas

Recipientes são o que o Bootstrap usa como seu elemento de layout básico e eles são necessários quando você está usando o sistema de grade padrão. Dentro de contêineres, você precisa adicionar uma linha. Linhas são wrappers para colunas e você pode especificar o número de colunas que você deseja de um possível 12 e o que o ponto de interrupção será. No nosso caso, queremos um elemento que tenha um ponto de interrupção de tamanho médio e preenche três colunas de largura.

 & lt; div classe = "contêiner" & gt;
 & lt; div classe = "linha" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Adicionar link de imagem e cor aqui
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Definir imagem e cor do perfil

O primeiro elemento da interface do usuário do perfil que começaremos com será para um membro da equipe feminina e ela fará parte da equipe azul. A cor será especificada usando uma classe chamada azul e a cor real acabará sendo definida usando variáveis ​​de sass, que faremos em um passo posterior. Então precisaremos adicionar uma foto e dar uma aula chamada de foto.

 & lt; div classe = "equipe azul" & gt;
    & lt; div classe = "foto" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Adicionar nome e título de perfil

O último bit de HTML a ser adicionado será para o nome, título e ícones sociais, que serão adicionados por baixo da última tag Div que acabamos de adicionar no último passo. Para os ícones sociais, estaremos usando fonte incrível e estes serão colocados em uma lista não ordenada.

 & lt; div classe = "perfil-txt" & gt;
      & lt; h1 class = "title" & gt; libby & lt; / h1 & gt;
      & lt; span class = "posição" & gt; web designer & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul classe = "ícones sociais" & gt;
       & lt; li & gt; & lt; a href = "" classe = "fa fa-facebook" & gt; & lt; / a & gt; & lt; / lt; / lt & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" e gt; & lt; / a & gt; & lt; / lt; / lt; / lt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; & lt; / a & gt; & lt; / lt; / lt;
       & lt; li & gt; & lt; a href = "" classe = "fa fa-dribbble" & gt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Definir variáveis ​​de sass

Se você estiver seguindo ao usar o Codepen, então você já terá Sass instalado e pronto para ir. Você só precisa clicar no botão / botão de configurações da caneta e escolher SCSs como seu pré-processador CSS. Então podemos ir em frente e adicionar algumas variáveis ​​que vão armazenar todas as nossas cores. Usamos o RGBA como os valores de cor para nos permitir um controle mais significativo de toda a opacidade das cores.

 $ Blugradient: RGBA (103, 188, 223 ,,8);
$ Lightgreen: RGBA (188, 219, 183, .5);
$ Verde: RGBA (119, 180, 109, 0,5);
$ Verde-fronteira: RGBA (171, 221, 164, 0,5);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-border: RGBA (147, 223, 236, 1); 

06. Carregar uma imagem de fundo

Para fazer as coisas parecerem mais atraentes, vamos colocar uma bela imagem de fundo no corpo. Aqui podemos usar nosso primeiro conjunto de variáveis ​​e dar a imagem de fundo uma sobreposição gradiente agradável que vai de verde verde para azul. Em seguida, para tornar a nossa imagem de fundo totalmente responsiva, definiremos a altura da vista para 100VH.

 corpo {
 Antecedentes: Linear-Gradient (para a direita, $ Lightgreen, $ Blugradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Centro não repetir;
 Fundo de tamanho: capa;
 Posição: Relativo;
 Altura: 100vh;
 } 

07. Escolha um perfil de fundo e imagem

Cada perfil de equipe receberá os mesmos estilos e a equipe de classe será usada para isso. O fundo será branco, todo o conteúdo centrado e precisamos ter certeza de que a posição é definida como relativa. Em seguida, podemos incluir o CSS para a imagem do perfil. Para obter melhores resultados, verifique se a imagem original que você usa tem dimensões não maior que o quadrado de 200px. No entanto, vamos alterar a altura e a largura destes dentro da regra da foto CSS.

 .team {
 preenchimento: 30px 0 40px;
 Margem-Top: 60px;
 Fundo: #fff;
 Alinhamento de texto: centro;
 estouro: oculto;
 Posição: Relativo;
 Cursor: Ponteiro;
 Sombra de caixa: 0 0 25px 1px RGBA (0,0,0,0,0,0);
 .foto {
 Exibir: bloco inline;
 Largura: 130px;
 Altura: 130px;
 Margem de fundo: 50px;
 Posição: Relativo;
 Z-index: 1;
 }
 } 

08. Adicione as animações

A primeira peça de animação que adicionaremos será no topo do nosso elemento de perfil. A ideia é que, quando pairam sobre todo o elemento, uma forma circular azul vai animar. Podemos controlar quanto do azul podemos ver especificando a posição disso para ter uma porcentagem inferior. Então jogue por aí com essa porcentagem e você terá uma ideia melhor de como isso funciona. Você nunca sabe: você pode até descobrir um efeito melhor!

 .blue .photo: antes de {
 contente: "";
 Largura: 100%;
 Altura: 0px;
 raio de fronteira: 50%;
 Fundo: $ azul;
 Posição: Absoluto;
 fundo: 130%;
 Direita: 0;
 Esquerda: 0;
 transformar: escala (3);
 Transição: todos .3s linear 0s;
}
.team: hover .photo: antes de {
 Altura: 100%;
} 

09. Animate a foto da equipe

A foto da equipe é o nosso ponto focal nesta interface do usuário e é provavelmente o elemento mais óbvio que você esperaria animar em alguma forma ou forma. O CSS Vamos adicionar nesta etapa primeiro virá a foto em um círculo menor, então, quando paired houver lá, haverá uma borda azul clara adicionada a ela e a foto diminuirá junto com a fronteira. Com as transições adicionadas, obtemos uma animação de líquido agradável.

 .blue .pic: depois de {
 contente: "";
 Largura: 100%;
 Altura: 100%;
 raio de fronteira: 50%;
 Fundo: $ azul;
 Posição: Absoluto;
 top: 0;
 Esquerda: 0;
 Z-index: 1;
}
.team .photo img {
 Largura: 100%;
 Altura: Auto;
 raio de fronteira: 50%;
 transformar: escala (1);
 Transição: Todos os 0.9s facilitam 0s;
}
.Blue: hover .photo img {
 caixa-sombra: 0 0 0 14px $ blue-border;
 Transformar: escala (0,6);
 }

10. Tweak o nome e a posição do perfil

O nome do perfil e a posição precisam de um pouco de arrumar. Estes não serão animados, mas isso não deve impedi-lo de adicionar sua própria animação a estes, se quiser. Talvez dimensione-os ligeiramente em pairar, como você terá espaço suficiente devido ao redimensionamento da foto.

 .Profile-txt {
 margem inferior: 30px;
 .título {
 Tamanho da fonte: 2rem;
 Peso de fonte: 700;
 Cor: # 333;
 Espaçamento de letras: 1.5px;
 Transformação de texto: capitalizar;
 margem inferior: 6px;
 }
 .posição{
 Exibir: bloco;
 Tamanho da fonte: 1rem;
 Cor: # 555;
 }
} 

11. Adicionar ícones sociais

Os ícones sociais serão primeiro posicionados fora da parte inferior da página por -100px. Então, quando o mouse sobre ele, a posição inferior será definida como zero e com uma transição adicionada, isso nos dará uma boa animação suave, pois move-se de volta à vista. Os ícones receberão seu próprio estado de Hover, definindo seu plano de fundo para branco e o ícone para azul.

 .blue .social-ícones {
 Largura: 100%;
 Estilo de lista: nenhum;
 preenchimento: 0;
 Margem: 0;
 Fundo: $ azul;
 Posição: Absoluto;
 fundo: -100px;
 Esquerda: 0;
 Transição: Todos os 0.6s facilitam;
 li {
 Exibir: bloco inline;
 
 uma {
 Exibir: bloco;
 preenchimento: 8px;
 Tamanho da fonte: 1rem;
 cor: #fff;
 Decoração de texto: nenhuma;
 Transição: Todos os 0.5s facilitam;
 & amp;: hover {
 cor: $ azul;
 Fundo: #fff;
 }
 }
 }
}
.team: hover .social-ícones {
 Bottom: 0px;
} 

12. Faça o membro da equipe verde

Para misturar um pouco as coisas, podemos começar a adicionar mais membros à nossa equipe. A cor que vamos usar para este próximo será verde. Mas primeiro volte para a seção / arquivo HTML e tudo o que precisamos fazer é copiar a classe Col-MD-3 - não a linha - para baixo para a última tag div sob os ícones sociais e colá-lo.

 & lt; div classe = "equipe verde" & gt;
 & lt; div classe = "foto" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Depois de ter mudado a aula azul para verde, podemos finalmente adicionar todos os CSs que nos darão a mesma animação.

 .green: Hover .Photo img {
 Box-Shadow: 0 0 0 14px $ Verde-fronteira;
 Transformar: escala (0,6);
 }
.green .photo: antes de {
 contente: "";
 Largura: 100%;
 Altura: 0px;
 raio de fronteira: 50%;
 Fundo: $ Verde;
 Posição: Absoluto;
 fundo: 135%;
 Direita: 0;
 Esquerda: 0;
 transformar: escala (3);
 Transição: todos .3s linear 0s;
}
.green .social-ícones {
 Largura: 100%;
 Estilo de lista: nenhum;
 preenchimento: 0;
 Margem: 0;
 Fundo: $ Verde;
 Posição: Absoluto;
 fundo: -100px;
 Esquerda: 0;
 Transição: Todos os 0.6s facilitam;
 li {
 Exibir: bloco inline;
 uma {
 Exibir: bloco;
 preenchimento: 8px;
 Tamanho da fonte: 1rem;
 cor: #fff;
 Decoração de texto: nenhuma;
 Transição: Todos os 0.5s facilitam;
 & amp;: hover {
 Cor: $ Verde;
 Fundo: #fff;
 }
 }
 }
} 

E a beleza dessa abordagem é que você pode repetir conforme necessário para muitas classes de cores diferentes, permitindo que você diminua sutilmente suas animações da interface do usuário.

Se você estiver construindo um site com uma equipe, certifique-se de ficar confiável, seguro armazenamento na núvem para manter as coisas coesivas.

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

Quer aprender mais sobre os meandros da animação da UI?

Se você estiver interessado em aprender mais sobre como você pode fazer seus sites pop e brilhar usando a animação da interface do usuário elegante, certifique-se de que você pegou seu ingresso para Gere London .

Um designer front-end e desenvolvedor atualmente trabalhando como desenvolvedor criativo para asemblr.com, Steven Roberts estará entregando sua conversa - Animação CSS: além das transições - na qual ele mostrará as melhores ferramentas para o trabalho e recriar algumas das melhores animações A Web tem para oferecer, descobrindo as possibilidades e limitações de animar apenas CSS.

Gerar Londres ocorre de 19 a 21 de setembro de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

• Como usar animação em aplicativos móveis
• O Guia do Pro do Projeto Ui
• Um guia para iniciantes para projetar animações de interface