Priscila dentro da classe .animated-background::before você deverá usar os seguintes códigos:
- Para adicionar loop infinito: animation-iteration-count: infinite; /* faz com que fique com loop infinito */
- Para adicionar um delay: animation-delay: 2s; /* Adicionando o delay para este container */
Você pode ajustar o delay colocando o tempo que preferir. Pode usar decimais, tipo 2.5s como pode usar também o tempo em milisegundos, como 250ms que corresponde a 0.25s.
Para adicionar a funcionalidade de a animação acontecer apenas quando o elemento estiver visível na tela, você vai ter obrigatoriamente fazer uso de JS já que CSS não é capaz de resolver isso. Deverá adicionar o seguinte código:
document.addEventListener("DOMContentLoaded", function() {
// Selecionar os elementos com as animações de fundo
const container1 = document.querySelector('.animated-background1');
const container2 = document.querySelector('.animated-background2');
// Função para adicionar a classe de animação quando o container estiver visível
const startAnimation = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('start-animation');
observer.unobserve(entry.target); // Desativar o observer após iniciar a animação
}
});
};
// Criar o IntersectionObserver
const observer = new IntersectionObserver(startAnimation, {
threshold: 0.5 // Define o nível de visibilidade para ativar (50% visível)
});
// Observar os containeres
observer.observe(container1);
observer.observe(container2);
});
Você pode ajustar o percentual que o elemento deverá aparecer na tela antes da animação se iniciar alterando o valor numérico da linha threshold: 0.5 // Define o nível de visibilidade para ativar (50% visível). O valor deverá estar entre 0 e 1, aceitando decimal, onde 0 significa 0% (não visível, portanto deverá ocorrer com o pageload) e 1 equivale a 100%. Configurei com 50%.
Existem pelo menos três formas de adicionar JavaScritp ao site com Beaver Builder:
pelo functions.php, mas o código deverá ser levemente manipulado para não causar erro;
através de plugin de código como o WP Code que é um ótimo plugin e é o que eu costumo usar para todos os códigos adicionais, incluindo CSS. Com ele consigo organizar e centralizar todos os códigos podendo desativar qualquer um a qualquer momento sem ter que apagar nada;
diretamente pelo Beaver Builder durante a edição da página onde está adicionando a animação clicando no canto superior esquerdo na região onde tem o ícone do castor (1), depois indo na opção CSS/JavaScript do layout (2) e na barra de edição clicar na opção JavaScript (3) e colar o código.
Contudo para que o JS funcione adequadamente, o código CSS deverá ser atualizado. Vou colocar aqui uma versão integral do código que estou usando em duas colunas, você pode usar e adaptar se necessário:
/* Para o primeiro container */
.animated-background1 {
position: relative;
overflow: hidden;
}
.animated-background1::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-image: url('https://www.siteajuda.com/wp-content/uploads/2024/08/bg-proud-woman.png');
background-size: cover;
background-position: center;
opacity: 0;
z-index: 0;
transition: opacity 0.5s ease;
}
.animated-background1.start-animation::before {
animation: slideInOut 7s ease-in-out forwards;
opacity: 1; /* Garantir que a opacidade comece no valor correto */
}
.animated-background1 > * {
position: relative;
z-index: 1; /* Elementos filhos à frente */
}
/* Para o segundo container */
.animated-background2 {
position: relative;
overflow: hidden;
}
.animated-background2::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-image: url('https://www.siteajuda.com/wp-content/uploads/2024/08/bg-proud-woman2.png');
background-size: cover;
background-position: center;
opacity: 0;
z-index: 0;
transition: opacity 0.5s ease;
}
.animated-background2.start-animation::before {
animation: slideInOut 7s ease-in-out forwards;
opacity: 1; /* Garantir que a opacidade comece no valor correto */
}
.animated-background2 > * {
position: relative;
z-index: 1; /* Elementos filhos à frente */
}
/* Animação comum */
@keyframes slideInOut {
0% {
left: -100%;
opacity: 0;
}
10% {
left: 0;
opacity: 1;
}
40% {
left: 0;
opacity: 1;
}
60% {
left: 100%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
Após a inserção desse JS a propriedade delay do CSS, expressa pela linha animation-delay: 2s; /* Adicionando o delay para este container */, deixa de funcionar e você deverá manipular o delay de outra forma. A mais simples seria alterando o tempo de execução da animação na linha animation: slideInOut 7s ease-in-out forwards;para 9s por exemplo, mas isso não vai exatamente adicionar um delay mas sim fazer com que a animação toda seja um pouco mais longa. Uma outra forma seria criando um novo keyframe, o que é um pouco mais complexo (mas se for necessário me avise que posso gerar um para você, caso aumentar o duração da animação não seja suficiente).
O resultado final ficou como no vídeo abaixo onde eu aguardo 5s para rolar a tela garantindo que a animação não ocorre no pageload:
