Crie animação de imagem de fundo em movimento usando o Free Elementor Page Builder

Criar uma animação de imagem de Fundo em movimento usando o construtor de páginas Free Elementor parece muito fácil para mim agora Aqui você precisa adicionar algum código CSS dentro da página Há uma maneira de adicionar CSS código livre Elementor também.

Vou compartilhar algo incrível com a imagem de fundo Foi muito divertido criar algo incrível que parece atraente. Aqui estão duas fontes sobre diferentes tipos de Fundo da página do elementador e Fundo distorcido do elementador Certifique-se de verificar isso se quiser organizar sua página de elementor ou o plano de fundo das seções de maneira criativa. 

O que é uma animação de imagem de fundo em movimento?

A animação de imagem de fundo em movimento é uma animação CSS em loop que desliza lentamente uma ampla imagem de fundo atrás do conteúdo da sua página, para que a seção pareça viva sem carregar um arquivo de vídeo. No Elementor você o constrói com uma seção de altura total, dois espaçadores carregando os IDs CSS bg e sobrepor, e um pequeno bloco de CSS @keyframes código colado widget HTML (não é necessária licença do Elementor Pro) e nenhum JavaScript é um dos mais leves. Efeitos de animação elementar você pode adicionar, porque o navegador anima uma única transformação em vez de reproduzir mídia.

Primeiro vamos ver como é exatamente no vídeo a seguir.

Esta seção está disponível em Biblioteca de modelos Master Addons de graça. Você pode importar isso facilmente em sua página se for um Master Addons (Mestre Addons) Elementor Construtor de páginas addon usuário plugin. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

Verificar como instalar e ativo Master Addons Plugin

Crie uma página ou poste e edite-a usando o elementor Você verá o ícone da biblioteca Master Addons Template. 

Clique na biblioteca MA Tempalte e aguarde alguns segundos para carregar os dados Você verá “Ready Page” e “Sections” Clique na guia de seções e aguarde alguns segundos Agora você verá a animação de imagem de fundo “Moving”. 

Agora clique no ícone de zoom para visualizá-lo Então você verá um botão de inserção Clique neste botão “insert” para obter este modelo em um clique Depois disso você está livre para editar o conteúdo.

É assim que sua seção ficará Estou usando o tema padrão do WordPress no meu localhost Basta clicar no título ou parágrafo ou social para editar o conteúdo. 

Se você quiser adicionar sua própria imagem e efeito de sobreposição, você deve passar para o alterando a seção BG e sobreposição de imagens agora.

Tutorial de animação de imagem de fundo em movimento

Resposta curta: construa uma seção Elementor de uma coluna definida como “Fit to screen”, adicione um espaçador com o ID CSS bg acima do seu conteúdo e um segundo espaçador com o ID sobrepor abaixo dele, então, em seguida, o código de animação SSS abaixo em um widget HTML e sw em sua própria imagem URLs Você precisa de três um amplo plano de fundo imagem, um PNG sobreposição e SVG sobreposição URL e toda a construção leva cerca de dez minutos no construtor Elementor livre.

Ativos que você precisa: 

1. Uma imagem com dimensões de 1.500 por 500 pixels
2. Uma imagem de sobreposição PNG
3. Uma imagem de sobreposição SVG

Agora adicione uma estrutura de uma coluna e faça com que sua altura seja “Fit to screen”. 

Basta adicionar seu conteúdo agora Vou compartilhar as informações de tipografia de conteúdo demo aqui. 

Título (elemento usado ou elemento de cabeçalho padrão): Família de fontes: Fonte Sans Pro, Tamanho da fonte: 120px, Peso da fonte: 900, Altura da linha: 140, Espaçamento entre letras: -5, Cor: Preto

Texto (Elemento padrão do Editor de Texto do Elementor Usado): Família de fontes: Fonte Sans Pro, Tamanho da fonte: 30px, Peso da fonte: 400, Altura da linha: 40, Cor: Preto

Social (Elemento Social Padrão de Elementor Usado): Forma: Círculo, Alinhamento: Centro, Cor: Personalizado, Preto Primário: rgba(175.175.175,0), Cor Secundária: Preto, Tamanho: 40, Espaço: 30, Tipo de borda: Sólido, Largura da borda: 2, Cor da borda: Preto

Dê uma olhada na animação GIF a seguir e você entenderá como aplicar todas essas propriedades em seu elemento elementor. 

Coloque z-index=1 em cada elemento usando a guia avançada Basta clicar em cada elemento e navegar até a guia Avançado Verifique a imagem a seguir. 

(Se você perder isso, enfrentará problemas na edição do conteúdo dos elementos após adicionar o código CSS da imagem de fundo em movimento. Você deve usar o sistema Elementor Navigator para editar o conteúdo se não colocar o índice z aqui.)

Agora Adicione dois espaçadores Um está no topo do título e outro está na parte inferior do ícone da mídia social. 

Coloque “BG” como ID no espaçador superior. E coloque “overlay” como ID no espaçador inferior. 

Adicionando ID BG no espaçador superior

Adicionando ID de sobreposição no espaçador inferior

Adicione o “HTMLelemento ” sob o ícone da mídia social ou na parte superior do segundo espaçador. 

Alterando o link Imagem BG e Imagem Sobreposta

Você se lembra sobre nossos ativos de animação de imagem Moving BG? agora é hora de carregá-los em seu site Carregue a imagem de fundo, sobreposição PNG e imagem de sobreposição SVG Em seguida, copie esses 3 links e liste-os em seu editor de código ou bloco de notas. 

Copie o seguinte código em seu editor de código E altere o link de imagem de fundo, PNG e SVG link de sobreposição de imagem Eu adicionei duas capturas de tela onde você pode encontrar facilmente quais links você deve alterar. 

Clique em cada imagem para ver a versão em alta resolução. 

Alterar URL da imagem de fundo

Alterar URL das imagens de sobreposição

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

Agora copie seu código editado com imagens Bg e Overlay Em seguida, cole-o no elemento HTML Você verá o resultado instantaneamente Se você souber como trabalhar com CSS, então você pode personalizar a animação também.

Vamos mudar as cores do texto e das mídias sociais para branco para ver a aparência exata que mostrei a você.

Isso é tudo sobre a criação de Movendo a Animação de Imagem de Fundo usando plugin construtor de página elementor Você pode estilizar seu conteúdo usando o nosso Plugin do Mestre Addon também. este será o plano de fundo fixo para a sua página Se você quiser definir o plano de fundo móvel para uma seção, em seguida, basta alterar a posição para “absoluto“. 

Sinta-se à vontade para comentar aqui se você enfrentar algum problema Eu vou guiá-lo para personalizar sua animação de imagem BG em movimento.

Perguntas frequentes