Apesar do Elementor ser muito completo, é muito comum termos que recorrer ao CSS para implementar algum efeito e deixar nosso site mais atrativo para nosso público.
Eu separei alguns Scripts de movimento que certamente irão embelezar ainda mais a sua página.
Use o CSS personalizado do Elementor: O Elementor permite que você crie seu próprio CSS personalizado dentro do editor. Use isso para estilos específicos que não estão incluídos nos recursos padrão do Elementor.
A propriedade animation é utilizada para aplicar a animação ao elemento, e a função cubic-bezier() é utilizada para definir a curva de aceleração da animação. A classe .infinite pode ser adicionada à animação para fazê-la executar infinitamente.
Vamos lá!
01. Animação de rotação:
#elemento {
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Este código animará o elemento com uma rotação infinita.
02. Animação de mudança de cor:
#elemento {
animation: color-change 1s ease-in-out infinite;
}
@keyframes color-change {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}
Este código animará o elemento com uma mudança de cor infinita.
03. Animação de transição de escala:
#elemento {
animation: scale 1s ease-in-out infinite;
}
@keyframes scale {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
Este código animará o elemento com uma transição de escala infinita.
04. Animação de desvanecimento:
#elemento {
animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
Este código animará o elemento com um efeito de desvanecimento infinito.
05. Animação de transição de posição:
#elemento {
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(50px); }
100% { transform: translateX(0); }
}
Este código animará o elemento com uma transição de posição infinita.
06. Animação de Pulsar:
.pulse {
animation: pulse 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Neste exemplo, a classe .pulse é aplicada ao elemento HTML que se deseja fazer pulsar. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de pulsação é criado utilizando a propriedade transform e diferentes valores de scale.
07. Animação de Piscar:
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes shake {
0% {
transform: translate(0);
}
10%, 90% {
transform: translate(-5px, 0);
}
20%, 80% {
transform: translate(5px, 0);
}
30%, 50%, 70% {
transform: translate(-5px, 0);
}
40%, 60% {
transform: translate(5px, 0);
}
100% {
transform: translate(0);
}
}
Neste exemplo, a classe .shake é aplicada ao elemento HTML que se deseja fazer tremer. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de tremer é criado utilizando a propriedade transform e diferentes valores de translate.
08. Mostrar elemento depois de um tempo (Fade)
#meuElemento {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Neste exemplo, estamos aplicando a animação fadeIn ao elemento com o ID meuElemento. A animação tem uma duração de 1 segundo e um atraso de 5 segundos antes de começar.
A propriedade animation-fill-mode é definida como forwards para manter o elemento com uma opacidade de 1 após a animação ter terminado. A animação fadeIn é definida com @keyframes, que define os valores de opacidade do elemento de 0 a 1 durante a duração da animação.
Aplique esses efeitos com bastante atenção, insira o código no espaço determinado no Elementor e você não terá problemas.
Por Paulo Anderson, Idealizador dor Curso de WordPress para Empreendedores Digitais (WED) – Saiba mais
Quer aumentar suas oportunidades no mercado digital?
Conheça o método WED, onde ensino pessoas comuns a criar Sites e Landing Pages profissionais sem a necessidade de saber programar. Esse mercado paga no mínimo R$500 por criação de uma simples Landing Page.
