Editor do Wix Studio: adicionar efeitos do mouse
5 min de leitura
Eleve a interatividade do seu design com nossos efeitos de mouse cativantes. Adicione um efeito de mouse a um elemento que você deseja destacar. O movimento do cursor do visitante aciona o efeito automaticamente.
Oferecemos uma variedade de efeitos que você pode usar para combinar com o site do seu cliente, como os que você vê abaixo.
Neste artigo, saiba mais sobre:
Observação:
Como esses efeitos exigem um cursor de mouse, eles não serão reproduzidos em dispositivos com tela touch (por exemplo: celulares, tablets, etc.)
Adicionar um efeito do mouse a um elemento
Selecione o elemento que deseja animar e abra o painel Inspetor para escolher um dos nossos efeitos do mouse.
Para adicionar um efeito do mouse:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Clique na aba Animações e efeitos
. - Clique em Efeitos do mouse e clique em + Adicionar.
- Selecione um efeito da coleção.
- (Opcional) Clique em Ajustar animação na parte inferior para personalizar configurações como direção, distância e easing.
Personalizar um efeito do mouse
Após escolher um efeito do mouse, configure-o para se comportar da maneira que você deseja. Torne o efeito mais sutil ou visível ao personalizar configurações como distância, direção, velocidade, easing e outras.
Observação:
As opções de personalização disponíveis dependem do efeito que você escolher.
Para personalizar um efeito do mouse:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na aba Animações e efeitos .
- Clique no efeito em Efeitos do mouse para editar.
- Clique em Ajustar animação para alterar suas configurações:
- Direção: decida a direção do mouse
- Acompanha o mouse: faz com que o elemento siga o movimento do cursor do mouse.
- Oposta ao mouse: faz com que o elemento se mova na direção oposta ao mouse. Por exemplo, se o mouse for movido para cima, o elemento será movido para baixo.
- Distância: decida a distância que o elemento pode se mover (em px, %, vh ou vw).
- Velocidade: arraste o slider para alterar a velocidade do efeito. Quanto menor o número, mais rápido o efeito.
- Eixo de movimento: decida se o elemento se move na horizontal, vertical ou nos dois eixos.
- Easing: escolha a forma gradual com que o efeito deve aparecer e/ou desaparecer.
- Perspectiva: escolha a distância entre o elemento e o cursor do visitante. Um valor mais baixo resultará em um efeito 3D mais intenso do que um valor mais alto.
- Direção: decida a direção do mouse
Dica:
Ative a alavanca Mover o mouse para visualizar para ver o efeito diretamente na tela, sem precisar visualizar o site.
Remover o efeito do mouse
Você pode remover um efeito do mouse a qualquer momento no painel Inspetor.
Para remover um efeito de mouse:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na aba Animações e efeitos .
- Passe o mouse sobre a animação e clique no ícone Mais ações
. - Clique em Remover.
Esse artigo foi útil?
|