Editor do Wix Studio: criar uma interação personalizada de clique ou hover | Central de Ajuda

Editor do Wix Studio: criar uma interação personalizada de clique ou hover

7 min de leitura

Adicione interações para criar uma animação quando os visitantes clicarem ou passarem o mouse sobre os elementos. A interação pode animar o mesmo elemento que a acionou ou qualquer outro elemento na página.

Com interações personalizadas, você tem total liberdade criativa para criar uma animação do zero. Você também pode controlar o tempo da animação para que ela seja realmente eficaz.

Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.

Etapa 1 | Adicione um gatilho (clique ou hover)

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 o painel Inspetor para adicionar uma nova interação.

Dica:

Você pode adicionar várias interações a um elemento para que ele acione diferentes animações quando um vistante passa o mouse ou clica nele.

Para adicionar um gatilho:

Selecione o elemento que deve acionar a interação.
Clique no ícone Abrir inspetor no canto superior direito do editor.

Uma captura de tela do painel Inspetor no Editor do Wix Studio.

Clique na aba Animações e efeitos .
Selecione Hover/Clique.
Clique em + Adicionar.

A aba Animações e efeitos no painel Inspetor, adicionando uma nova animação ao passar o mouse

Etapa 2 | Configure a interação

Agora você pode escolher qual elemento será animado, a animação que deve aparecer e a ação exata que acontece ao passar o mouse ou ao clicar (por exemplo: aplicar a animação, ativar/desativar, etc)

Para configurar a interação:

(No painel Configuração) Selecione uma opção no dropdown Ao passar o mouse/Ao clicar:
- Começar animação: clicar/passar o mouse sobre o elemento aciona a animação escolhida.
- Ativar/desativar animação: semelhante a uma alavanca, clicar no elemento aciona a animação e um segundo clique a remove.
- Redefinir animação: clicar/passar o mouse sobre o elemento remove um efeito que foi aplicado anteriormente.
Selecione uma opção no dropdown 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.
Clique na aba Personalizada.
Clique em Criar animação personalizada.

Dica:

As animações personalizadas que você cria são salvas para uso futuro em outros elementos.

Uma captura de tela da aba personalizada quando você ainda não tem nenhuma animação salva

Etapa 3 | Personalize a animação

Agora é hora de criar a animação do zero. Adicione todos os tipos de transformações de layout e design, altere o tamanho do elemento (Dimensão), posição (Translação), ângulo (Girar), cor de preenchimento e muito mais.

Você também personalizar o design do estado inicial do seu elemento para complementar a animação, ou seja, como o elemento aparece ao ser carregado, antes do visitante interagir com ele. Para juntar tudo, defina a duração e a atenuação da animação.

Para personalizar a animação:

Escolha como deseja personalizar a animação:

Ajustar o design do elemento

Crie o design do estado inicial do elemento

Definir a duração e a atenuação da animação

2. (Opcional) Clique em

Reproduzir na barra flutuante para visualizar a animação.

3. Quando estiver tudo pronto, clique em OK.

Um GIF mostrando a visualização da animação na tela

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.