Gradient baggrundsanimation kan være en fantastisk designteknik til at bringe baggrundsfarver til live på din Websted. Det er en perfekt løsning for dem, der ønsker noget mere realistisk end en statisk baggrundsfarve uden at skulle ty til en langsomt indlæst videobaggrund. Den grundlæggende idé bag gradient baggrundsanimation er at bruge CSS til at skabe en forstørret og animere en gradient baggrund for at skabe jævne bevægelige farveovergange.
I denne vejledning viser vi dig, hvordan du opretter gradientbaggrundsanimationer på Divi. Denne metode kombinerer et tilpasset CSS-uddrag, der animerer de gradientfarver, der er valgt i de integrerede Divi-indstillinger. Konfigurationen er faktisk ret enkel for et så smukt resultat.
Lad os starte!
Posisble resultat
Her er en oversigt over de to måder, vi kan oprette en gradient baggrundsanimation på Divi.
Selvfølgelig er forudsætningen for denne tutorial, at du har en Divi-tema installeret og opdateret.
Oprettelse af en gradient baggrundsanimation med CSS-ekstraktet og baggrundsmuligheden for Divi
For at starte skal du tilføje en række med en kolonne til standardsektionen i Divi Builder.
Sektionsindstillinger
Opdater derefter sektionsindstillingerne med et baggrundsbillede. Vores gradientbaggrund føjes til vores linje, så den overlapper dette billede.
Opdater derefter udfyldningen som følger:
- Polstring: 0px høj, 0px lav
Række- og kolonneindstillinger
Kolonneparametre
Åbn rækkeindstillingerne, og opdater derefter kolonneudfyldningen som følger:
- Polstring: over 12vw
Føj derefter følgende brugerdefinerede CSS til hovedkolonneelementet:
height: 40vw;
Linieindstillinger
Gradient baggrund
Nu kan vi tilføje gradientbaggrunden til linjen. Sørg for at gøre gradientfarverne halvtransparente, hvis du vil se sektionens baggrundsbillede.
Opdater linjeparametrene som følger:
- Baggrundsfarve til venstre gradient: rgba (12,113,195,0.8)
- Baggrundsfarve på gradient til højre: rgba (131,0,233,0.8)
- Gradienttype: lineær
- Gradientretning: 45 grader
Størrelse
Opdater derefter linjestørrelsen som følger:
- Bredde: 100%
- Maks bredde: 100%
Tilpasset CSS-klasse
Nu hvor vores gradientbaggrund er på plads, skal vi tilføje animationen via tilpasset CSS. Før vi tilføjer CSS-koden, skal vi tilføje en tilpasset CSS-klasse for at målrette mod den specifikke række.
Gå til den avancerede fane, og tilføj følgende CSS-klasse:
- CSS-klasse: animere-gradient
Tilføj et kodemodul
Når CSS-klassen er føjet til linjen, skal du tilføje et kodemodul til linjen.
Indsæt CSS i kodemodulet
Indsæt derefter følgende CSS-kode i området Code Code Settings Module:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Sørg for at indpakke koden i <style></style>tags, fordi vi tilføjer det til HTML-koden på siden.
Resultat
Her er resultatet hidtil. Gradientbaggrunden er blevet forstørret til 400% af den oprindelige størrelse og animeres ved at flytte til venstre og højre.
Tilføj et opfordring til handling
For at afslutte designet, lad os tilføje et opfordring til handling-modul for at være en del af indhold.
Indstillinger for opfordring til handling
Indhold
Opdater indhold som følger:
- Tilføj en titel
- Tilføj knappetekst
- Tilføj brødtekst
- URL til knapets link: #
- Brug baggrundsfarve: NEJ
Conception
Gå til fanen Design, og opdater følgende:
- Titeltype: Kaushan Script
- Titeltekststørrelse: 4vw (desktop), 30px (telefon)
- Titelinjehøjde: 1,4 em
- Body Police: Roboto
- Knappen tekststørrelse: 16px
- Knaptekstfarve: # 555555
- Knapbaggrund: #ffffff
- Knapkantbredde: 0px
- Knapgrænseradius: 30 pixels
- Afstand mellem knapbogstaver: 3px
- Knapfont: Roboto kondenseret
- Knappens fontvægt: fed
Resultat
Tjek nu resultatet på livesiden med indhold af opfordringen til handling på plads. Dette ville være en fantastisk header til din Websted !
Husk, du kan nemt ændre baggrundsfarverne på din linje til hvad du vil. Koden fortsætter med at køre i baggrunden for at animere baggrunden for dig.
Hvis du kender lidt CSS, kan du justere hastigheden og retningen af animationen ved at ændre værdierne for animationsegenskaberne.
Jeg håber, du fandt denne tutorial nyttig. Tøv ikke med at dele dine meninger om det.
