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

Accede al editor de páginas;
Haz clic en el ícono de engranaje que está en la esquina superior derecha de la pantalla;

Enseguida, haz clic en "Javascript & CSS";

Haz clic para "Adicionar" un nuevo código;

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>

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.

¡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 del final del código. Tal como en este ejemplo de abajo.

Cómo obtener el ID de un elemento

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".

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

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

Actualizado el: 29/07/2026

¿Este artículo te resultó útil?

¡Gracias!