> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como inserir a animação WIGGLE EFFECT (Elementos Flutuantes)

1. Acesse o editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1bggvwg.png =650x385)

2. Clique no **ícone de engrenagem** que fica no canto superior direito da tela;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_cndbfy.png =650x182)

3. Em seguida, clique em **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1irpm3k.png =650x407)

4. Clique para **"Adicionar código"**; 

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_450b86.png =650x414)

5. Escolha um nome para seu código, selecione a opção **"Funcionamento"** e adicione no campo de texto todo o código abaixo;

```
<style>
  
  @keyframes float {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }

    100% {
      transform: translateY(0);
    }
  }

  .float {
    animation: float 2s ease-in-out infinite;

  }
</style>


<script>

  let wiggle = document.querySelectorAll("#ElementID_01, #ElementID_02, #ElementID_03");
  wiggle.forEach(function (elemento) {
    const deslocamento = Math.floor(Math.random() * 20) - 1;
    const animate = "float " + (Math.random() * 1 + 10) + "s ease-in-out infinite";
    elemento.style.transform = "translateX(" + deslocamento + "px)";
    elemento.style.animation = animate;
  });

</script>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-11-as-_cp1wgr.png =650x738)

6. A única mudança que você precisará fazer no código, é alterar a parte onde está escrito **#ElementID\_01** para o ID do seu respectivo elemento. **Não adicione nenhum caractere a mais**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1ozhpcn.png =650x173)

Em seguida clique em **"Salvar"**! 

|| Caso queira que um segundo elemento permaneça flutuante na página, basta inserir todo o script acima novamente, logo abaixo do primeiro sem a TAG </style> do final do código . Bem como neste exemplo abaixo.  

### Como pegar o ID de um elemento

1. Para identificar o ID de um elemento, basta clicar para **Editar** o elemento; 

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1vtm3jz.png =650x356)

2. Feito isso, uma nova tela irá abrir ao lado direito. Quando ela abrir, localize o menu **"Código"** e clique para copiar o elemento em **"Seletor CSS do elemento"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-11-as-_163aqb6.png =650x537)

Ficou com alguma dúvida? Chame nossa equipe no Chat! Estamos sempre prontos para ajudar. :-)