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

Editor do Wix Studio: criar uma interação personalizada de clique ou ao passar o mouse

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

ディカ

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.
クリックしない 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 Passar o mouse/Clicar.
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.

ディカ

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

ディカ

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.