Transforme os projetos dos seus clientes com nossos efeitos WebGL, criados para transformar backgrounds de mídia em elementos de destaque. Esses efeitos chamam a atenção dos visitantes do site e, ao mesmo tempo, garantem um desempenho ideal. Escolha entre uma variedade de predefinições incríveis, ajuste suas propriedades e decida como elas são ativadas: automaticamente na rolagem ou através do movimento do mouse do visitante.
Adicionar um efeito WebGL
Vá para o painel Inspetor para adicionar um efeito WebGL a um background de mídia de uma seção. Você pode escolher entre várias predefinições diferentes, dependendo do visual e da interação que deseja obter.
Para adicionar um efeito WebGL:
- Adicione uma imagem ou vídeo ao background da seção relevante.
Observação: os efeitos WebGL não são compatíveis com backgrounds de GIF, assim como backgrounds de mídia definidos para se ajustar como Lado a lado. - Selecione a seção na tela.
- Aplique um efeito WebGL:
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Clique na aba Animações e efeitos
. - Clique em + Adicionar em Efeitos WebGL.
- Selecione um efeito na lista.
Personalizar um efeito WebGL
Personalize os efeitos WebGL para ajustar sua aparência e comportamento, esteja você adicionando distorções sutis ou movimentos dinâmicos ousados. Cada efeito vem com seu próprio conjunto de configurações ajustáveis, como intensidade, velocidade e direção, dando a você controle total sobre como ele interage com seu conteúdo.
Para determinados efeitos, você também pode decidir o que os aciona no site do seu cliente: reprodução automática, rolagem, movimento do mouse ou uma combinação de várias ações.
Para personalizar um efeito WebGL:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na aba Animações e efeitos .
- Clique no efeito que você deseja alterar.
- Clique em Ajustar animação para alterar suas configurações:
- Tamanho do ponteiro: arraste o slider para modificar a área que responde ao efeito quando um visitante passa o mouse sobre o background da seção. Aumentar a área torna o efeito mais visível, enquanto diminuí-la mantém a área mais direcionada.
- Ruído: arraste o slider para controlar o nível de ruído. Aumentar o ruído faz com que o efeito pareça mais texturizado e distorcido.
- Velocidade do ponteiro: arraste o slider para controlar a rapidez com que o movimento segue o mouse quando um visitante passa o mouse sobre o background da seção.
- Intensidade: arraste o slider para controlar a intensidade do efeito. Aumentar a intensidade faz com que o background da seção pareça mais "torto" quando os visitantes passam o mouse sobre ele.
- Tamanho do ponteiro: arraste o slider para modificar a área que responde ao efeito quando um visitante passa o mouse sobre o background da seção. Aumentar a área torna o efeito mais visível, enquanto diminuí-la mantém a área mais direcionada.
- Velocidade do ponteiro: arraste o slider para controlar a rapidez com que o movimento segue o mouse quando um visitante passa o mouse sobre o background da seção.
Observação: as configurações disponíveis podem variar dependendo dos gatilhos que você escolher.
- Gatilho: selecione um gatilho, ou vários gatilhos, para ativar o efeito: reprodução automática, movimento do mouse ou rolagem. Adicione mais gatilhos ao clicar no ícone Adicionar
e remova um gatilho ao clicar no ícone Remover 
ao lado dele.
- Direção: escolha uma direção para o efeito: horizontal ou vertical.
- Duplicados: arraste o slider para controlar como o "slit" captura novas linhas da imagem ou vídeo de background. Um número mais alto de duplicatas torna o efeito mais dinâmico, enquanto um número menor oferece uma transformação mais lenta.
- Velocidade do ponteiro: arraste o slider para controlar a rapidez com que o movimento segue o mouse quando um visitante passa o mouse sobre o background da seção.
- Velocidade da reprodução automática: arraste o slider para controlar a velocidade com que as linhas se movem.
- Cores: escolha as cores que se misturam para criar o efeito de "orb" - Todos, Verde e magenta, etc.
- Ângulo da cor: arraste o slider para definir o ângulo em que as cores se misturam e fazem a transição.
- Tamanho do ponteiro: arraste o slider para modificar a área que responde ao efeito quando um visitante passa o mouse sobre o background da seção. Aumentar a área torna o efeito mais visível, enquanto diminuí-la mantém a área mais direcionada.
- Ruído: arraste o slider para controlar o nível de ruído. Aumentar o ruído faz com que o efeito pareça mais texturizado e distorcido.
- Velocidade do ponteiro: arraste o slider para controlar a rapidez com que o movimento segue o mouse quando um visitante passa o mouse sobre o background da seção.
- Esticar ondulação: Arraste o slider para ajustar a largura das ondas de ondulação, fazendo com que elas se expandam ou contraiam.
- Intensidade: arraste o slider para controlar a intensidade do efeito. Aumentar a intensidade torna as ondulações mais dramáticas e fáceis de ver.
- Ruído: arraste o slider para controlar o nível de ruído. Aumentar o ruído faz com que o efeito pareça mais texturizado e distorcido.
- Velocidade da reprodução automática: arraste o slider para controlar a velocidade com que as ondulações se movem.
Observação: as configurações disponíveis podem variar dependendo dos gatilhos que você escolher.
- Gatilho: selecione um gatilho, ou vários gatilhos, para ativar o efeito: reprodução automática, movimento do mouse ou rolagem. Adicione mais gatilhos ao clicar no ícone Adicionar e remova um gatilho ao clicar no ícone Remover ao lado dele.
- Cores: escolha as cores que criam o efeito de divisão: Todos, Verde e magenta, etc. Essas cores aparecem como camadas fragmentadas sobre o background da seção.
- Recuo do canal: arraste o slider para ajustar o alinhamento dos canais de cor. Aumentar o recuo separa e desfoca as cores, criando um efeito mais intenso e psicodélico.
- Ângulo: arraste o slider para definir o ângulo em que as cores são rotacionadas dentro do efeito.
- Tamanho do ponteiro: arraste o slider para modificar a área que responde ao efeito quando um visitante passa o mouse sobre o background da seção. Aumentar a área torna o efeito mais visível, enquanto diminuí-la mantém a área mais direcionada.
- Ruído: arraste o slider para controlar o nível de ruído. Aumentar o ruído faz com que o efeito pareça mais texturizado e distorcido.
- Velocidade do ponteiro: arraste o slider para controlar a rapidez com que o movimento segue o mouse quando um visitante passa o mouse sobre o background da seção.
- Velocidade da reprodução automática: arraste o slider para controlar a velocidade com que as cores se movem.
Remover um efeito WebGL
Você pode remover um efeito WebGL que adicionou anteriormente ao background de uma seção.
Para remover um efeito WebGL:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na aba Animações e efeitos .
- Clique no ícone Mais ações
ao lado do efeito WebGL. - Selecione Remover.
Perguntas frequentes
Clique nas perguntas abaixo para saber mais sobre efeitos WebGL no Editor do Wix Studio.
Os efeitos WebGL funcionam em dispositivos com tela touch?
Alguns efeitos WebGL exigem um cursor do mouse, portanto, eles não aparecerão em dispositivos móveis:
- Granulado, RGB orb e Dissolver só podem ser acionados pelo movimento do mouse. Nesse caso, você pode alternar para um efeito diferente para resolver o problema.
- Em Slit-scan e RGB split, você escolhe o que aciona o efeito. Se o movimento do mouse for o seu único gatilho, o efeito será desativado em dispositivos móveis. Para fazer o efeito aparecer, adicione outro gatilho (por exemplo: reprodução automática).
- O efeito Ondulações está definido para ser reproduzido automaticamente em qualquer dispositivo, por isso, ele aparece nas telas touch sem que você precise fazer nada.
Por que a opção para adicionar efeitos WebGL está acinzentada no meu editor?
Os motivos podem ser:
- Você pode ter adicionado um background de GIF, que não é compatível com efeitos WebGL.
- Você pode ter definido seu background de mídia como Lado a lado (em Opções de encaixe).
Para alterar o ajuste do background:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Role para baixo até Opções de encaixe em Design.
- Selecione Tamanho original ou Preenchimento total.
