Como Usar Animação Hover Em Web Design
Color On Hover
Definir a cor do elemento em foco ajuda a concentrar a atenção dos visitantes em um elemento e dá uma impressão e um 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á até a seção Animação Ligada, clique no link Hover e, em seguida, na caixa de seleção Hover. Modifique a cor a ser aplicada ao pairar.
Fronteira ao pairar
A Borda do Elemento também é importante para melhorar a interação dos Elementos e chamar a atenção dos visitantes. Você pode alterar a borda flutuante para elementos como ícone, imagem, forma, grupo, grade, etc. Na seção Deslocamento do painel de propriedades, marque a caixa de seleção Deslocamento. Modifique a Borda a ser mostrada ao passar o mouse sobre um Elemento.
Radius On Hover
Para imagens e formas, grupos e células de grade, você pode alterar o raio ao pairar. Os elementos tornam-se atraentes com esta propriedade, solicitando ações (botões Comprar agora, Ler mais, etc.) e tornando seu design único. Na seção Hover do painel de propriedades, ative o modo Hover. Arraste o controle deslizante Raio para definir seu valor Ao pairar.
Shadow On Hover
Você pode modificar a propriedade Shadow em Hover para textos e outros elementos. Para definir a sombra ao pairar, adicione ou selecione um elemento. Em seguida, clique no link Hover do Painel de Propriedades, marque a caixa de seleção Hover e modifique a Sombra a ser aplicada ao Hover. Você pode começar com um dos Predefinições de sombra e personalizá-lo se necessário.
Transparência ao pairar
Você pode modificar a transparência do elemento ao passar o mouse para adicionar interação e atratividade ao design do site. No painel de propriedades, clique no link Hover e marque a caixa de seleção Hover. Defina a transparência a ser aplicada ao passar o mouse. Clique em algum lugar do bloco para desmarcar o elemento. Passe o mouse sobre o elemento para testar a mudança de transparência.
Mover em pairar
Os efeitos de animação flutuante usados em sites modernos tornaram-se mais sofisticados. Um dos exemplos de efeito é o elemento mover ao pairar. 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 Mover X, Y.
Rotação ao pairar
A rotação ao pairar é 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. Acesse e clique no link Hover na seção Animation On e 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 pairar
O dimensionamento pode parecer a reação mais natural do cursor. Portanto, pode ser muito popular. Você pode adicionar facilmente 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 Escala, Girar e Mover. O tamanho real é igual a 100.
Hover Duration
Você pode gerenciar a animação flutuante 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 pairar
Adicionando a animação flutuante 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 Hover 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 em foco
Você também pode alterar o preenchimento para imagens e até mesmo alterar uma imagem de fundo para outra enquanto estiver pairando, o que pode entreter muito seus visitantes. Selecione uma forma e adicione uma imagem para o 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 Backgroud. Escolha a imagem flutuante. Teste.