Gradijentna pozadinska animacija može biti izvrsna tehnika dizajna za oživljavanje pozadinskih boja na vašem web stranica. To je savršeno rješenje za one koji žele nešto realističnije od statične pozadinske boje bez pribjegavanja video pozadini koja se sporo učitava. Osnovna ideja gradijentne pozadinske animacije je korištenje CSS-a za stvaranje uvećane i animirane gradijentne pozadine za stvaranje glatkih pokretnih prijelaza boja.
U ovom uputstvu pokazat ćemo vam kako stvoriti animacije gradijentne pozadine na Divi. Ova metoda kombinira prilagođeni CSS isječak koji animira boje gradijenta odabrane u integriranim postavkama Divi. Konfiguracija je zapravo vrlo jednostavna za tako lijep rezultat.
Krenimo!
Mogući rezultat
Ovdje je pregled dva načina na koje možemo stvoriti gradijentsku pozadinsku animaciju na Divi.
Naravno, preduvjet za ovaj vodič je da imate Divi tema instaliran i ažuran.
Stvaranje gradijentne pozadinske animacije s CSS ekstraktom i pozadinskom opcijom Divi
Za početak dodajte red od jednog stupca u zadani odjeljak u Divi Builderu.
Postavke odjeljka
Zatim ažurirajte postavke odjeljka pozadinskom slikom. Naša će se gradijentna pozadina dodati našoj liniji tako da prekriva ovu sliku.
Zatim ažurirajte punjenje na sljedeći način:
- Padding: 0px visoko, 0px low
Postavke redaka i stupaca
Parametri stupca
Otvorite postavke retka, a zatim ažurirajte popunjavanje stupaca na sljedeći način:
- Podloga: iznad 12vw
Zatim dodajte sljedeći prilagođeni CSS glavnom elementu stupca:
height: 40vw;
Postavke linije
Gradijentna pozadina
Sada liniji možemo dodati pozadinu gradijenta. Obavezno učinite boje gradijenta poluprozirnim ako želite vidjeti pozadinsku sliku odjeljka.
Ažurirajte parametre linije na sljedeći način:
- Boja pozadine lijevog gradijenta: rgba (12,113,195,0.8)
- Boja pozadinske pregrade na desnoj strani: rgba (131,0,233,0.8)
- Tip gradijenta: linearni
- Smjer gradijenta: 45 stupnjeva
Veličina
Zatim ažurirajte veličinu linije na sljedeći način:
- Širina: 100%
- Maks. Širina: 100%
Prilagođena klasa CSS
Sad kad je postavljena naša gradijentna pozadina, trebamo dodati animaciju putem prilagođenog CSS-a. Prije dodavanja CSS koda, moramo dodati prilagođenu CSS klasu za ciljanje tog određenog retka.
Idite na naprednu karticu i dodajte sljedeću CSS klasu:
- CSS klasa: animate-gradijent
Dodajte modul koda
Nakon što je CSS klasa dodana u redak, dodajte liniji modul koda.
Zalijepite CSS u modul koda
Zatim zalijepite sljedeći CSS kôd u područje modula postavki kodnog koda:
.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%;}}
Obavezno umotajte kod u <style></style>oznake jer ga dodajemo u HTML kôd stranice.
rezultat
Evo dosadašnjeg rezultata. Pozadina gradijenta povećana je na 400% od izvorne veličine i animirana je pomicanjem lijevo-desno.
Dodajte poziv na akciju
Da bismo dovršili dizajn, dodajmo modul poziva na akciju koji će biti dio sadržaj.
Postavke poziva na akciju
Sadržaj
Ažurirajte sadržaj kako slijedi:
- Dodajte naslov
- Dodavanje teksta gumba
- Dodajte tekst teksta
- URL veze gumba: #
- Koristite boju pozadine: NE
Začeće
Idite na karticu Dizajn i ažurirajte sljedeće:
- Naslov naslova: Kaushan Script
- Veličina teksta naslova: 4vw (desktop), 30px (telefon)
- Visina naslovne linije: 1,4 em
- Tijelo policije: Roboto
- Veličina teksta gumba: 16px
- Boja teksta gumba: # 555555
- Pozadina gumba: #ffffff
- Širina obruba gumba: 0px
- Polumjer obruba gumba: 30 piksela
- Razmak između slova s gumbom: 3 px
- Font gumba: Roboto condensed
- Težina slova gumba: podebljano
rezultat
Sada provjerite rezultat na stranici uživo pomoću sadržaj poziva na akciju na mjestu. Ovo bi bilo sjajno zaglavlje za vas web stranica !
Zapamtite, možete jednostavno promijeniti boju pozadine svoje crte kako god želite. Kôd će se nastaviti prikazivati u pozadini kako bi animirao pozadinu za vas.
Ako znate malo CSS-a, možete prilagoditi brzinu i smjer animacije mijenjanjem vrijednosti svojstava animacije.
Nadam se da vam je ovaj vodič bio koristan. Ne ustručavajte se podijeliti svoja mišljenja o tome.
