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

Acesse o editor de páginas;

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

Em seguida, clique em "Javascript & CSS";

Clique para "Adicionar" um novo código;

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>

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.

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

Para identificar o ID de um elemento, basta clicar com o lado direito do mouse em cima do elemento e em seguida clicar em "Inspecionar elemento".

Feito isso, uma nova tela irá abrir ao lado direito. Quando ela abrir, localize o ID do elemento que deseja usar.

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

Atualizado em: 04/05/2023

Este artigo foi útil?

Obrigado!