Animacioni i sfondit me gradient mund të jetë një teknikë e shkëlqyer dizajni për të gjallëruar ngjyrat e sfondit në tuaj Site Web. Është një zgjidhje perfekte për ata që duan diçka më realiste se një ngjyrë statike sfondi pa pasur nevojë të përdorin një sfond video me ngarkim të ngadaltë. Ideja bazë pas animacionit të sfondit gradient është përdorimi i CSS për të krijuar zmadhimin dhe animimin e një sfondi gradient për të krijuar tranzicione të lëmuara ngjyrash.
Në këtë manual, ne do t'ju tregojmë se si të krijoni animacione të sfondit gradient në Divi. Kjo metodë kombinon një pjesë të personalizuar të CSS që gjallëron ngjyrat gradiente të zgjedhura në cilësimet e integruara të Divi. Konfigurimi është në të vërtetë mjaft i thjeshtë për një rezultat kaq të bukur.
Le të fillojmë!
Rezultati pozmbel
Këtu është një përmbledhje e dy mënyrave se si mund të krijojmë një animacion gradual të sfondit në Divi.
Sigurisht, parakushti për këtë tutorial është që të keni një Tema divi të instaluara dhe të përditësuara.
Krijimi i një animacioni gradient të sfondit me ekstraktin e CSS dhe opsionin e sfondit të Divi
Për të filluar, shtoni një rresht të një kolone në seksionin e paracaktuar në Divi Builder.
Cilësimet e seksionit
Pastaj azhurnoni cilësimet e seksionit me një imazh sfond. Sfondi ynë gradient do të shtohet në vijën tonë në mënyrë që të mbivendosë këtë imazh.
Pastaj azhurnoni mbushjen si më poshtë:
- Mbushje: 0px e lartë, e ulët 0px
Cilësimet e rreshtit dhe kolonës
Parametrat e kolonës
Hapni cilësimet e rreshtit, pastaj azhurnoni kolonën e mbushur si më poshtë:
- Mbushje: mbi 12vw
Pastaj shtoni CSS të mëposhtme të personalizuar në elementin kryesor të kolonës:
height: 40vw;
Cilësimet e linjës
Sfondi i gradientit
Tani mund të shtojmë sfondin e gradientit në vijë. Sigurohuni që t'i bëni ngjyrat gradient gjysmë transparente nëse doni të shihni imazhin e sfondit të seksionit.
Azhurnoni parametrat e linjës si më poshtë:
- Ngjyra e sfondit të gradientit të majtë: rgba (12,113,195,0.8)
- Ngjyra e sfondit të gradientit në të djathtë: rgba (131,0,233,0.8)
- Lloji i gradientit: linear
- Drejtimi i gradientit: 45 gradë
Madhësi
Pastaj azhurnoni madhësinë e linjës si më poshtë:
- Gjerësia: 100%
- Gjerësia maksimale: 100%
Klasa CSS me porosi
Tani që sfondi ynë gradient është në vend, duhet të shtojmë animacionin përmes CSS të personalizuar. Para se të shtojmë kodin CSS, duhet të shtojmë një klasë të personalizuar CSS për të synuar atë rresht specifik.
Shkoni te skeda e përparuar dhe shtoni klasën vijuese CSS:
- Klasa CSS: grada animate-gradient
Shtoni një modul kodi
Pasi të shtohet klasa CSS në linjë, shtoni një modul kodi në rresht.
Ngjitni CSS në modulin e kodit
Pastaj ngjitni kodin e mëposhtëm CSS në zonën e Modulit të Cilësimeve të Kodit të Kodit:
.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%;}}
Sigurohuni që ta mbështillni kodin në <style></style>etiketat sepse ne e shtojmë atë në kodin HTML të faqes.
Rezultat
Këtu është rezultati i deritanishëm. Sfondi i gradientit është zgjeruar në 400% të madhësisë origjinale dhe animohet duke lëvizur majtas dhe djathtas.
Shtoni një thirrje për veprim
Për të përfunduar dizajnin, le të shtojmë një modul thirrje për veprim për të qenë pjesë e përmbajtje.
Cilësimet e thirrjes për veprim
Përmbajtje
Përditësoni përmbajtje si më poshtë:
- Shtoni një titull
- Shtoni tekstin e butonit
- Shtoni tekstin e trupit
- URL e lidhjes së butonit: #
- Përdorni ngjyrën e sfondit: JO
Konceptim
Shkoni te skeda Design dhe azhurnoni sa vijon:
- Shkronja e titullit: Skenari Kaushan
- Madhësia e tekstit të titullit: 4vw (desktop), 30px (telefon)
- Lartësia e rreshtit të titullit: 1,4 em
- Policia e Trupit: Roboto
- Madhësia e tekstit të butonit: 16px
- Ngjyra e tekstit të butonit: # 555555
- Sfondi i butonit: #ffffff
- Gjerësia e kufirit të butonit: 0px
- Rrezja kufitare e butonit: 30 piksele
- Hapësira e shkronjave të butonave: 3px
- Shkronja e butonit: Roboto e kondensuar
- Pesha e shkronjave të butonit: e theksuar
Rezultat
Tani kontrolloni rezultatin në faqen e drejtpërdrejtë me përmbajtje të thirrjes për veprim në vend. Ky do të ishte një goditje e shkëlqyer me kokën tuaj Site Web !
Mos harroni, ju lehtë mund të ndryshoni ngjyrat e sfondit të linjës tuaj në çfarëdo që dëshironi. Kodi do të vazhdojë të ekzekutohet në sfond për të gjallëruar sfondin për ju.
Nëse dini pak CSS, mund të rregulloni shpejtësinë dhe drejtimin e animacionit duke ndryshuar vlerat e vetive të animacionit.
Shpresoj se e keni parë të dobishëm këtë udhëzues. Mos hezitoni të ndani mendimet tuaja mbi të.
