Krijimi i një animacioni të lëvizjes së sfondit të tekstit është një mënyrë unike për të shtuar tekstura të animuara me ngjyra në tekstin tuaj. Site Web ndërsa një përdorues është duke lëvizur faqen. Me Divi, procesi është çuditërisht i lehtë pasi të mësoni disa teknika kryesore.
Në këtë tutorial, ne do të përdorim vetëm fuqinë e parametrave të integruar të Divi për të krijuar 3 dizajne unike që paraqesin një animacion shumëngjyrësh të lëvizjes së sfondit të tekstit. Madje do t'ju tregojmë se si të krijoni një version të errët të çdo dizajni për një pamje krejtësisht të re.
Le të fillojmë!
Rezultati i mundshëm
Këtu keni një vështrim në planet që do të ndërtojmë sot.
Dizajni 1: Gradient i sfondit të tekstit me efekt lëvizës horizontale
Ky model i parë do të shfaqë një efekt lëvizës horizontal që gjallëron një modul ndarës me ngjyra pas një moduli teksti me filtrin e ekranit.
Shtoni një kolonë
Për të filluar, shtoni një rresht me një kolonë në seksionin e paracaktuar.
Shto një modul teksti
Pastaj shtoni një modul të ri teksti në kolonë.
Përmbajtje
Hidh le përmbajtje kolonë, ngjisni kodin e mëposhtëm HTML në kuti përmbajtje:
Formatimi i tekstit
Pastaj azhurnoni modelin e tekstit si më poshtë:
- Ngjyra e sfondit: #ffffff
- Stili i fontit të tekstit: TT
- Ngjyra e tekstit: # 000000
- Madhësia e tekstit: 100 px (desktop), 40 px (telefon)
- Hapësira e shkronjave të tekstit: 0.15em
- Lartësia e vijës së tekstit: 1em
- Shtrirja e tekstit: qendra
- Font Titulli: Merriweather
- Pesha e fontit të titullit: e guximshme
- Stili i fontit të titullit: TT
- Rreshtimi i tekstit të kokës: Qendra
- Ngjyra e tekstit të kokës: # 000000
- Madhësia e tekstit të kokës: 200px (desktop), 80px (telefoni)
- Hapësira e letrës së titullit: 0.15em
- Lartësia e linjës së titullit: 1em
Mbushje dhe filtër
Tani duhet të shtojmë disa mbushje dhe filtër ekrani në modulin e tekstit. Filtri është i nevojshëm që ky dizajn të funksionojë pasi është ai që lejon ngjyrat / modet e sfondit të shfaqen pas tekstit.
Për të shtuar mbushjen dhe filtrimin, azhurnoni sa vijon:
- mbushje: e lartë 15px, e ulët 20px
- Mënyra e përzierjes: Ekran
Shënim: Modaliteti i përzierjes së ekranit funksionon më mirë me tekstin e zi në një sfond të bardhë. Nëse do të donim të përdorim tekst të bardhë në një sfond të zi, do të përdornim mënyrën e përzierjes Multiply.
Ndarës i sipërm dhe i poshtëm
Pasi moduli ynë i tekstit të jetë i plotë, le të shtojmë disa ndarës (sipër dhe një poshtë modulit të tekstit) për një element shtesë të projektimit.
Shtoni një ndarës më të ulët
Shtoni një modul të ri ndarjeje nën modulin e tekstit.
Cilësimet më të larta të ndarjes
Hapni cilësimet e ndarësit dhe zgjidhni JO për të shfaqur ndarësin.
Pastaj azhurnoni sfondin dhe jepini ndarësit të njëjtën mënyrë të përzierjes si moduli i tekstit si më poshtë:
- Ngjyra e gradës së majtë të gradientit: # 000000
- Ngjyra e sfondit gradient në të djathtë: #ffffff
- Drejtimi i gradientit: 90deg
- Pozicioni i fillimit: 48%
- Pozicioni i fundit: 0%
- Mënyra e përzierjes: Ekran
Pastaj azhurnoni lartësinë e ndarësit në ekranin e telefonit si më poshtë:
- Lartësia: 15px (telefon)
Shtoni ndarësin e sipërm
Për të krijuar ndarësin e sipërm, kopjoni ndarësin e mëparshëm të poshtëm dhe tërhiqeni atë sipër modulit të tekstit duke përdorur zonën e shfaqjes së shtresave.
Pastaj përmbysni ngjyrat në sfondin e gradientit.
Përditësoni parametrat e linjës
Pasi të jenë vendosur ndarësit tanë të sipërm dhe të poshtëm, azhurnoni parametrat e linjës si më poshtë:
- Gjerësia e hendekut: 1 (për të hequr kufijtë e poshtëm ndërmjet moduleve)
- Gjerësia maksimale: 600 piksele (për të mbajtur një dizajn koherent në desktop dhe tablet)
- Rreshtimi i linjës: qendër
- Mbushje: 0px e lartë, e ulët 0px
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
Krijoni një ndarës për ngjyrën e sfondit të tekstit të animuar
Elementi i fundit i këtij projekti të parë është ndarësi që do të përdorim për të gjallëruar ngjyrën e sfondit të tekstit në rrotull. Për ta bërë këtë, shtoni një modul të ri ndarjeje nën ndarësin e poshtëm.
Pastaj zgjidhni JO për të shfaqur ndarësin.
Cilësimet e ndarjes së sfondit
Përditësoni ndarësin me një sfond gradient si më poshtë:
- Ngjyra e gradës së majtë të gradientit: # e02b20
- Ngjyra e drejtuar e gradientit të sfondit: # 8300e9
- Drejtimi i gradientit: 90deg
- Pozicioni i fillimit: 30%
- Pozicioni i fundit: 70%
Ne duam që lartësia e ndarësit të jetë aq e lartë sa të ngjyrosë të gjithë tekstin tonë në modulin e tekstit dhe ndarësit e sipërm dhe të poshtëm. Për këtë dizajn, vendosni lartësinë në 400px.
- Lartësia: 400px
Pastaj jepi ndarësit një pozicion absolut për ta pozicionuar atë direkt mbi modulet e tjera. Përdorni indeksin Z për të vendosur ndarësin pas moduleve të tjera.
- Pozicioni: Absolut
- Indeksi Z: -1
Efektet e lëvizjes së ndarësit të sfondit
Me ndarësin në pozicion, gjithçka që duhet të bëjmë është të lëvizim ndarësin pas tekstit duke përdorur efektet e rrotullimit të Divi. Për këtë dizajn, ne thjesht do të shtojmë lëvizje horizontale në rrotull.
Përditësoni artikujt e mëposhtëm:
Nën skedën e lëvizjes horizontale ...
zyrë
- Aktivizoni lëvizjen horizontale: PO
- Fillimi i kompensimit: 6 (me 20%)
- Kompensimi mesatar: 0 (me 40% -60%)
- Përfundimi i kompensimit: -6 (me 80%)
Telefon
- Fillimi i kompensimit: 3
- Përfundimi i kompensimit: -3
Gjithashtu, sigurohuni që të vendosni këmbëzën për efektin e lëvizjes në mes të klipit:
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Shtoni ndarje të seksionit
Për të krijuar një hapësirë lëvizëse të përkohshme për të provuar modelin, shtoni sa më poshtë në seksionin:
- Margjina: 80vh më lart, 80vh më poshtë
Mendimet e fundit
Dizajnët e animacionit në sfond të tekstit të paraqitura në këtë artikull do të funksiononin shumë mirë si një dizajn statik pa lëvizjen e shtimit në lëvizje. Sidoqoftë, efektet shtesë të lëvizjes me të vërtetë e çojnë projektin në një nivel krejt të ri. Mos ngurroni të eksperimentoni me më shumë ngjyra dhe efekte!
Unë pres që të dëgjoj nga ju në komente.
Për shëndetin tuaj!
