> ## 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).

# Cómo insertar la animación WIGGLE EFFECT (Elementos Flotantes)

1. Accede al editor de páginas;

2. Haz clic en el **ícono de engranaje** que está en la esquina superior derecha de la pantalla;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/clicar-engrenagem_5znn9b.png)

3. Enseguida, haz clic en **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/achar-js_15h4zvr.png)

4. Haz clic para **"Adicionar"** un nuevo código;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/adicionar-codigo_sqhe1r.png =455xauto)

5. Elige un nombre para tu código, selecciona la opción **"Funcionamento"** y agrega en el campo de texto todo el código de abajo;

```
<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/image_he2sjh.png)

6. El único cambio que necesitarás hacer en el código es modificar la parte donde dice **#ElementID_01** por el ID de tu respectivo elemento. **No agregues ningún carácter de más**.

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

¡Enseguida haz clic en **"Salvar"**!

|| Si quieres que un segundo elemento permanezca flotante en la página, basta con insertar todo el script de arriba nuevamente, justo debajo del primero y sin la TAG </style> del final del código. Tal como en este ejemplo de abajo.

### Cómo obtener el ID de un elemento

1. Para identificar el ID de un elemento, basta con hacer clic con el botón derecho del mouse sobre el elemento y luego hacer clic en **"Inspeccionar elemento"**.

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturar7png_yip9jg.png)

2. Hecho esto, se abrirá una nueva pantalla del lado derecho. Cuando se abra, localiza el ID del elemento que deseas usar.

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturar8png_j86jy6.png)

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. :-)