Como Usar Animação Hover Em Web Design
Colorir ao passar o mouse
Definir a cor do elemento em foco ajuda a focar a atenção dos visitantes em um elemento e dá uma impressão e conceito da ideia desejada sobre seu significado. Você pode alterar a cor do elemento ao passar o mouse. Para isso, selecione um Elemento e, no Painel de Propriedades, vá para a seção Animação em, clique no link Passar o mouse e, em seguida, na caixa de seleção Passar. Modifique a cor a ser aplicada ao passar o mouse.
Borda ao passar o mouse
A Element Border também é importante para melhorar a interação da Elements e chamar a atenção dos visitantes. Você pode alterar a Borda de Passar o mouse para elementos como Ícone, Imagem, Forma, Grupo, Grade, etc. Na seção Passar o mouse do Painel de propriedades, marque a caixa de seleção Passar. Modifique a Borda a ser mostrada ao passar o mouse sobre um Elemento.
Raio ao passar o mouse
Para Imagens e Formas, Grupos e Células de Grade, você pode alterar o Raio ao passar o mouse. Os elementos tornam-se atraentes com esta propriedade, estimulando a ação (Botão Compre Agora, Leia mais, etc.) e tornando o seu design único. Na seção Hover do Property Panel, habilite o Hover Mode. Arraste o controle deslizante Radius para definir seu valor On Hover.
Sombra em movimento
Você pode modificar a propriedade Shadow em Hover for Texts e outros Elements. Para definir a sombra ao passar o mouse, adicione ou selecione um elemento. Em seguida, clique no link Hover do painel de propriedades, marque a caixa de seleção Hover, modifique a sombra a ser aplicada em Hover. Você pode começar com uma das predefinições de sombra e personalizá-la, se necessário.
Transparência ao passar o mouse
Você pode modificar o elemento Transparency on Hover para adicionar interação e atratividade ao design do site. No Painel de propriedades, clique no link Passar o mouse e marque a caixa de seleção Passar. Defina a transparência a ser aplicada ao passar o mouse. Clique em algum lugar no Bloco para desmarcar o Elemento. Passe o mouse sobre o elemento para testar a mudança de transparência.
Mover ao passar o mouse
Os efeitos de animação Hover usados em sites modernos tornaram-se mais sofisticados. Um dos exemplos de efeito é o Element Move on Hover. Você pode adicionar o movimento de um elemento ao passar o mouse. Adicione ou selecione um Elemento e vá para o Painel de Propriedades. Clique no link Hover e marque a caixa de seleção Hover. Defina os valores para a propriedade Move X, Y.
Girar ao passar o mouse
A rotação ao passar o mouse é o próximo efeito importante e complexo. Para girar um elemento ao passar o mouse, adicione ou selecione um elemento e vá para o painel de propriedades. Vá para e clique no link Hover na seção Animation On e, em seguida, marque a caixa de seleção Hover. Use o controle deslizante para definir o ângulo de rotação ou insira o valor no campo de entrada. Os valores suportados para o ângulo de rotação são de 0 a 359.
Escala ao passar o mouse
O dimensionamento pode parecer a reação mais natural do seu cursor. Portanto, pode ser muito popular. Você pode facilmente adicionar o Scale On Hover ao seu site. Para isso, adicione ou selecione um Elemento e vá até o Painel de Propriedades. Clique no link Hover da seção Animation On e marque a caixa de seleção Hover. Role para baixo até as propriedades Scale, Rotate e Move. O tamanho real é igual a 100.
Duração do foco
Você pode gerenciar a animação de foco definindo sua duração. Defina a duração da animação ao passar o mouse, adicione ou selecione um elemento e vá para o painel de propriedades. Selecione o link Hover da seção Animation On e escolha a caixa de seleção Hover. Os valores suportados para o Slider são de 10 a 200, e você pode inserir um número maior neste campo, se necessário.
Cor de fundo para gradiente ao passar o mouse
Adicionando a animação de foco a uma forma com um plano de fundo, você pode querer alterar o preenchimento sólido para algo atraente, como um gradiente. Para isso, selecione uma Forma e vá para o Link de Passagem do Painel de Propriedades. Clique no link Animation On - Hover e marque a caixa de seleção Hover. Selecione o Tipo de Gradiente para o Backgroud e defina o Gradiente.
Imagem de fundo para imagem ao passar o mouse
Você também pode alterar o preenchimento para imagens e até mesmo alterar uma imagem de fundo para outra enquanto passa o mouse, o que pode entreter muito seus visitantes. Selecione uma forma e adicione uma imagem para o plano de fundo. Vá para a seção Animation On do Property Panel e clique em Hover. Habilite o efeito Hover e selecione a Imagem como o Tipo de Fundo. Escolha a imagem flutuante. Teste.