Opret Moving Background Image Animation ved hjælp af Free Elementor Page Builder

Oprettelse af en bevægelig Baggrund billede animation ved hjælp af Free Elementor side builder synes meget let for mig nu. Her skal du tilføje nogle CSS kode inden for siden. Der er en måde at tilføje CSS kode gratis Elementor også.

Jeg kommer til at dele noget fantastisk med baggrundsbillede. Det var virkelig sjovt at skabe noget awesome, som synes iøjnefaldende. Her er to kilder på forskellige typer af Elementor Side Baggrund og Elementor Skewed Baggrund Sørg for at kontrollere dette, hvis du vil arrangere din elementorside eller sektionsbaggrund på en kreativ måde. 

Hvad Er en Moving Background Image Animation?

A animation af bevægende baggrundsbillede er en looping CSS animation, der langsomt glider et bredt baggrundsbillede bag dit sideindhold, så sektionen føles levende uden at indlæse en videofil. I Elementor bygger du det med en fuld-højde sektion, to afstandsstykker, der bærer CSS ID'erne bg og overlejre, og en kort blok af CSS @keyframes kode indsat i en HTML-widget — ingen Elementor Pro-licens og ingen JavaScript påkrævet. Det er en af de letteste Elementor animationseffekter du kan tilføje, fordi browseren animerer en enkelt transformation i stedet for at afspille medier.

Lad os først se, hvordan det præcist ser ud i den følgende video.

Dette afsnit er tilgængeligt i Master Addons skabelon bibliotek gratis. Du kan nemt importere dette inden for din webside, hvis du er en Master Addons – Elementor Page builder addon plugin bruger. 

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

Check sådan installeres og aktiv Master Addons Plugin

Opret en side eller et indlæg, og rediger den ved hjælp af elementor. Du vil se Master Addons Template bibliotek ikon. 

Klik på MA Tempalte bibliotek og vente et par sekunder for at indlæse dataene. Du vil se “Klar side” og “Sektioner”. Klik på sektioner fane og vente et par sekunder. Nu vil du se den “Flytning Baggrund billede animation”. 

Klik nu på zoomikonet for at forhåndsvise det. Så vil du se en indsæt-knap. Klik på denne “indsæt”-knap for at få denne skabelon med et klik. Derefter er du fri til at redigere indholdet.

Sådan vil din sektion se ud. Jeg bruger WordPress standardtema i min localhost. Bare klik på titel eller afsnit eller socialt for at redigere indhold. 

Hvis du vil tilføje dit eget billede og overlejringseffekt, skal du flytte til ændring af BG og Overlay Image-sektion now.

Moving Background Image animation tutorial

Kort svar: byg en en-kolonne Elementor sektion indstillet til “Pas på skærmen”, tilføj en spacer med CSS ID bg over dit indhold og en anden spacer med ID'et overlejre under den, og indsæt derefter CSS-animationskoden nedenfor i en HTML-widget og byt dine egne billed-URL'er ind. Du skal bruge tre aktiver — et bredt baggrundsbillede, en PNG-overlay og en SVG-overlay — og hele buildet tager omkring ti minutter på den gratis Elementor-sidebygger.

Aktiver Du har brug for: 

1. Et billede med 1500 gange 500 pixels Dimensioner
2. Et PNG-overlejringsbillede
3. Et SVG-underlægningsbillede

Tilføj nu en struktur med én kolonne og gør dens højde “Pas til skærm”. 

Bare tilføj dit indhold nu. Jeg vil dele demoindholdstypografioplysningerne her. 

Titel (Brugt Elementor standard overskriftselement): Font Family: Source Sans Pro, Skriftstørrelse: 120px, Skriftvægt: 900, Linjehøjde: 140, Brevafstand: -5, Farve: Black

Tekst (Brugt Elementor standard Text Editor Element): Font Family: Source Sans Pro, Skriftstørrelse: 30px, Skriftvægt: 400, Linjehøjde: 40, Farve: Sort

Social (Brugt Elementor Default Social Element): Form: Cirkel, Justering: Centrum, Farve: Brugerdefineret, Primær Sort: rgba(175,175,175,0), Sekundær Farve: Sort, Størrelse: 40, Mellemrum: 30, Kanttype: Solid, Kantbredde: 2, Kantfarve: Sort

Tag et kig på følgende GIF-animation, og du vil forstå, hvordan du anvender alle disse egenskaber i dit elementorelement. 

Sæt z-index=1 til hvert element ved hjælp af den avancerede fane. Bare klik på hvert element og navigere til Avanceret fane. Kontroller følgende billede. 

(Hvis du går glip af dette så vil du stå over for problem på redigering elementer indhold efter tilføjelse af bevægelige baggrundsbillede CSS-kode. Du er nødt til at bruge Elementor Navigator system til at redigere indhold, hvis du ikke sætter z-indeks her.)

Nu Tilføj to spacer. En er toppen af titlen, og en anden er bunden af ikonet for sociale medier. 

Sæt “BG” som ID i den øverste afstandsholder. Og sæt “overlay” som ID i den nederste afstandsholder. 

Tilføjelse af BG ID i top spacer

Tilføjelse af overlejrings-id i bundafstandsstykke

Tilføj den “HTML” element under social media ikonet eller øverst på second spacer. 

Ændring af BG Image og Overlay Image link

Kan du huske om vores Moving BG-billedanimationsaktiver? Nu er det tid til at uploade dem på dit websted. Upload baggrundsbilledet, PNG-overlayet og SVG-overlay-billedet. Kopier derefter disse 3 links og liste ned i din kodeeditor eller notesblok. 

Kopier følgende kode i din kode editor. Og ændre baggrundsbilledet link, PNG og SVG billede overlay link. Jeg har tilføjet to screenshot, hvor du kan finde nemt, hvilke links du skal ændre. 

Klik på hvert billede for at se versionen med høj opløsning. 

Skift baggrundsbillede URL

Skift URL til overlejring af billeder

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

Kopier nu din redigerede kode med Bg og Overlay billeder. Indsæt det derefter i HTML-elementet. Du vil se resultatet øjeblikkeligt. Hvis du ved, hvordan du arbejder med CSS, så kan du tilpasse animationen også.

Lad os ændre tekstfarvens og sociale mediers farve til hvid for at se det nøjagtige udseende, som jeg har vist dig.

Det handler om at skabe Moving Background Image Animation ved hjælp af elementor side builder plugin. Du kan style dit indhold ved at bruge vores Master Addons plugin også. Dette vil være fast baggrund for din side. Hvis du vil indstille bevægende baggrund for en sektion så bare ændre positionen til “absolut“. 

Du er velkommen til at kommentere her, hvis du står over for noget problem. Jeg vil guide dig til at tilpasse din bevægelige BG billede animation.

Ofte stillede spørgsmål