Editor do Wix Studio: adicionar uma interação predefinida de clique ou ao passar o mouse
5 min de leitura
Adicione Interações para criar uma experiência animada quando os visitantes clicarem ou passarem o mouse sobre os elementos. Precisa de uma animação rápida e fácil? Use uma de nossas predefinições (por exemplo: Expandir, Mover, Desaparecer) e ajuste-a como preferir.
A interação pode animar o mesmo elemento em que os visitantes clicam ou passam o mouse, ou um elemento diferente na página. De qualquer forma, você tem controle total do visual e de quando ocorre, para que seja efetiva.
Etapa 1 | Adicione um gatilho (clicar ou passar o mouse)
Para começar, selecione o elemento que aciona a interação. É o elemento sobre o qual os visitantes passam o mouse ou clicam antes de ver a animação. Em seguida, vá para a aba Interações no painel Inspetor para adicionar uma nova interação.
Dica:
Você pode adicionar várias interações a um elemento para que ele acione uma animação diferente quando um vistante passa o mouse ou clica nele.
Para adicionar um gatilho:
- Selecione o elemento que deve acionar a interação.
- Clique na seta Abrir inspetor
no canto superior direito do Editor. - Clique na aba Interações
. - Selecione Passar o mouse/Clicar.
- Clique em + Adicionar.
Etapa 2 | Configure a interação
Depois de escolher um elemento e acionador, configure a interação. Selecione uma animação predefinida, o elemento que deve mostrá-la e o que exatamente acontece ao passar o mouse ou clicar.
Observação:
As animações disponíveis dependem do elemento selecionado.
Para configurar a interação:
- (No painel Configuração da interação) Escolha o que acontece ao Passar o mouse/Clicar:
- Começar animação: clicar/passar o mouse sobre o elemento aciona a animação escolhida.
- Redefinir animação: clicar/passar o mouse sobre o elemento remove um efeito que foi aplicado anteriormente.
- Ativar/desativar: clicar no elemento aciona a animação e um segundo clique a remove.
Observação: essa opção só está disponível para interações de clique.
- Selecione o Elemento animado:
- Fazer com que o elemento acione sua própria animação: clique no nome do elemento (a palavra (auto) aparece ao lado dele).
- Animar um elemento diferente na página: selecione um elemento no dropdown ou clique em Escolher na tela para selecioná-lo na página.
Dica: mantenha pressionada a tecla Cmd/Ctrl para selecionar um elemento filho.
- Selecione uma animação:
- Clique na aba Elementos predefinidos.
- Escolha uma animação da lista.
Dica:
Ao definir um elemento para ser exibido ao clicar ou passar o mouse, ele aparece com uma sobreposição quadriculada na tela. Isso serve para indicar que o elemento é inicialmente transparente.
Você pode desativar essa indicação a qualquer momento. Clique no ícone Wix Studio 
, passe o mouse sobre Visualizar e clique em Elementos transparentes.
, passe o mouse sobre Visualizar e clique em Elementos transparentes.Etapa 3 | (Opcional) Ajuste a animação
Após escolher a animação desejada, personalize-a para obter o efeito desejado. Você pode controlar configurações como duração, atraso e ease para tornar a animação eficaz.
Observação:
As configurações disponíveis dependem da animação predefinida que você escolher.
Para ajustar a animação:
- (No Inspetor) Clique em Ajustar animação na parte inferior.
- Personalize as configurações disponíveis como preferir:
- Atraso: arraste o slider para adicionar um atraso (em segundos) antes que a animação comece.
- Duração: arraste o slider para definir a duração da animação (em segundos).
- Easing: escolha como a animação é atenuada no menu dropdown.
- Expandir/Diminuir: escolha o quanto o elemento cresce ou diminui.
- Ângulo: altere o ângulo do movimento.
- Distância: faça com que o elemento se aproxime ou afaste de sua posição padrão na página.
- Direção: altere a direção em que o elemento gira.
- (Opcional) Clique em Visualizar para ver a animação e fazer ajustes, se necessário.
Perguntas frequentes
Clique abaixo para saber mais sobre como criar interações.
Como fica um elemento quando ele aciona sua própria animação?
Como fica uma interação entre diferentes elementos?
Um elemento pode acionar vários outros elementos?
Um único elemento pode ter várias animações?
Esse artigo foi útil?
|