Galeritë e imazheve janë një destinacion i preferuar në shumicën e faqeve të internetit. Dhe, në shumë raste, mund të jetë më mirë të mbash ato galeri imazhesh të gëzueshme dhe statike, duke i lënë imazhet të funksionojnë magjinë e tyre.
Por, shtoni një efekt lëvizjeje të enigmës rrëshqitëse një galeri imazhesh (siç do të bëjmë në këtë tutorial), mund të japë një prekje freskuese për një klasik pa kohë.
Në këtë manual, ne do t'ju tregojmë se si të ndërtoni një plan urbanistik të thjeshtë që zbulon një galeri imazhesh me një efekt rrëshqitës të enigmës rrëshqitëse në Divi.
Çelësi është të kuptojmë se si madhësia e imazheve lidhet me vlerat vertikale dhe horizontale të kompensimit të secilit efekt lëvizës për të lëvizur imazhin saktësisht një pikë. Por kur të përfundojë, efekti i lëvizjes që rezulton është i qartë dhe i saktë pasi gradualisht montohet dhe zbulon një galeri të imazheve në një mënyrë unike.
Rezultati i mundshëm
Këtu është një përmbledhje e paraqitjes së galerisë së imazheve me efektin rrëshqitës të enigmës rrëshqitëse që do të krijojmë në këtë manual.
Krijimi i seksionit të kokës
Për të filluar, le të ndërtojmë një seksion të shpejtë të kokave që do t'i thotë përdoruesit të lëvizë në faqe për të parë galerinë dhe me efektet e tmerrshme të lëvizjes.
Shtoni një rresht
Shtoni një rresht të një kolone në seksionin e paracaktuar.
Shto një modul teksti
Brenda kolonës / rreshtit shtoni një modul të ri teksti.
Në cilësimet e tekstit, azhurnoni përmbajtjen e trupit me sa vijon:
<h1>Image Gallery</h1>
Cilësimet e modulit të tekstit
Në skedën Design, azhurnoni modelin e tekstit si më poshtë:
- Shkronja e titullit: Roboto
- Pesha e fontit të titullit: e guximshme
- Stili i fontit të titullit: TT
- Rreshtimi i tekstit të kokës: Qendra
- Madhësia e tekstit të kokës: 50px (desktop), 40px (tabletë dhe telefon)
- Hapësira e letrës së titullit: 4px
Shtoni një ikonë të modulit Blurb
Sapo të jetë krijuar teksti, shtoni një modul të ri teksti prezantimi nën modulin e tekstit.
Pastaj hiqni të gjithë titullin dhe trupin nga përmbajtja e paracaktuar dhe zgjidhni të përdorni ikonën e shigjetës poshtë.
Cilësimet e tekstit të prezantimit
Pastaj azhurnoni cilësimet e tekstit prezantues me një ngjyrë të re dhe një animacion rrëshqitës përsëritës.
- Ngjyra e ikonës: # ffb500
- Stili i animacionit: Slide
- Drejtimi i animacionit: poshtë
- Intensiteti i animacionit: 20%
- Përsëritja e animacionit: lak
Mbushja e seksionit
Për t'i dhënë hapësirës së seksionit për lëvizje, azhurnoni mbushjen si më poshtë:
- Mbushje: 20vh më lart, 50vh më poshtë
Këtu po përdorim njësinë e gjatësisë vh e cila është relativisht me lartësinë e dritares së shfletuesit në mënyrë që hapësira të përshtatet vazhdimisht në të gjitha madhësitë e shfletuesit.
Krijimi i galerisë së imazheve me efekte lëvizëse
Tani që seksioni ynë i kokës ka përfunduar, ne jemi gati të ndërtojmë galerinë aktuale të imazheve me efektet rrëshqitëse të enigmës. E gjithë galeria do të përbëhet nga tre rreshta me 4 imazhe / kolona në secilën rresht për të bërë gjithsej 12 imazhe. Sidoqoftë, lehtë mund të shtoni më shumë linja dhe imazhe në paraqitje pasi të ketë mbaruar.
Krijimi i seksionit dhe rreshtit
Shto një seksion të ri
Le të fillojmë duke shtuar një seksion të ri të rregullt nën seksionin e titullit.
Shtoni një rresht
Pastaj shtoni një rresht me katër kolona në seksion.
Cilësimet e linjës
Nën cilësimet e linjës, azhurnoni si vijon:
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 100%
- Gjerësia maksimale: 1200 px (desktop), 600 px (tablet), 300 px (telefon)
Si gjerësia e linjës përcakton madhësinë e figurës
Gjerësia e rreshtit është shumë e rëndësishme për këtë dizajn pasi do të diktojë gjerësinë e secilës prej katër kolonave. Sapo të vendosim gjerësinë e ullukut në 1, nuk do të ketë më diferencë midis imazheve.
Dhe kur vendosim gjerësinë maksimale në 1200px, skica e katër kolonave do ta bëjë secilën prej kolonave / imazheve saktësisht 300px të gjera (1200px / 4 = 300px).
Gjithashtu, meqenëse secila prej imazheve është katrore, ne e dimë se lartësia e secilës imazh do të jetë gjithashtu 300 piksele. Ne nuk duhet ta mbajmë në atë mënyrë nëse nuk duam.
Për shembull, ne gjithashtu mund të zgjedhim të kemi një plan urbanistik me tre kolona me imazhe prej 400 x 400 pikselë. Njohja e gjerësisë së figurës (300px) dhe lartësisë (gjithashtu 300px) do të jetë çelësi për krijimin e efektit të lëvizjes më vonë.
Shtimi i imazheve
Shtoni imazhin 1
Imazhi 1 Efektet lëvizni
Marrëdhënia midis madhësisë së figurës dhe kompensimit të efektit të lëvizjes
Kur përdorni efektin e lëvizjes vertikale dhe horizontale, është e rëndësishme të kuptoni se çfarë përfaqëson vlera numerike e futur. Në këtë shembull, ne kemi një lëvizje vertikale të fillimit të kompensimit të -3. Kjo -3 është në të vërtetë -300 px (ose 300 px poshtë) që është gjerësia e figurës.
Kompensimi pastaj arrin 0 (pozicioni i shtëpisë) kur përdoruesi lëviz. Kjo është ajo që krijon efektin e lëvizjes që lëviz imazhin pikërisht në një bllok / kornizë. Lëvizja horizontale fillon me 3 (300 piksel nga e djathta) dhe ndalet në pozicionin e saj të paracaktuar. Këto dy efekte kombinohen për të krijuar një efekt unik lëvizës me dy pjesë.
Shtoni imazhin 2
Pas shtimit të efekteve të lëvizjes në figurën 1. Shtoni fotografi të re në kolonën 2.
Ne do ta lëmë këtë imazh statik pa ndonjë efekt lëvizjeje.
Shtoni imazhin 3
Pastaj shtoni një modul tjetër imazhi në kolonën 3 dhe azhurnoni modulin me një imazh të ri.
Imazhi 3 Efektet lëvizni
Nën Cilësimet e Imazhit, azhurnoni efektet e mëposhtme të lëvizjes:
Nën skedën e lëvizjes horizontale ...
- Aktivizoni lëvizjen horizontale: PO
- Fillimi i kompensimit: -3 (me 0% të dritares)
- Kompensimi mesatar: 0 (me 15% të pamjes)
- Kompensimi përfundimtar: 0 (në 100% të shikimit)
Shtoni imazhin 4
Për të krijuar imazhin e fundit, kopjoni imazhin 1 dhe ngjiteni në kolonën 4.
Vendosni një imazh të ri në cilësimet e imazhit.
Imazhi 4 Efektet lëvizni
Pastaj azhurnoni efektet e mëposhtme të lëvizjes:
Nën skedën e lëvizjes vertikale ...
- Aktivizoni lëvizjen vertikale: PO
- Fillimi i kompensimit: 3 (me 0% të dritares)
- Kompensimi mesatar: 0 (me 15% -28% të pamjes)
- Kompensimi përfundimtar: 0 (në 40% të shikimit)
Nën skedën e lëvizjes horizontale ...
- Aktivizoni lëvizjen horizontale: PO
- Fillimi i kompensimit: 3 (me 0% të dritares)
- Kompensimi mesatar: 3 (me 28% të pamjes)
- Kompensimi përfundimtar: 0 (në 40% të shikimit)
Linja dyfish
Tani që efektet e lëvizjes së imazheve janë bërë për rreshtin e parë, gjithçka që duhet të bëjmë është të kopjojmë rreshtin për të krijuar më shumë imazhe dhe efektet e tyre përkatëse të lëvizjes. Për këtë shembull, le të kopjojmë rreshtin dy herë për të krijuar gjithsej tre rreshta.
Zëvendësoni dhe riorganizoni figurat sipas nevojës
Më pas mund t'i lëvizim imazhet duke përdorur funksionin drag and drop kudo që duam. Këtu mund të bëheni krijues dhe të shihni se si do të lëvizin imazhet në lëvizje. Dhe pasi imazhet të jenë vendosur, ju mund të zëvendësoni përmbajtjen e modulit të imazheve me imazhe të reja që plotësojnë nevojat e Site Web.
Prekje përfundimtare
Dukshmëria e seksionit
Meqenëse imazhet tona ndoshta do të shtrihen jashtë seksionit / dritares, le të fshehim tejmbushjen për ta pastruar pak. Hapni cilësimet e seksionit dhe azhurnoni sa vijon:
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
Mbushja e seksionit
Ne duam që efekti i lëvizjes vertikale të imazhit të sipërm (i cili shtrihet mbi seksionin) të jetë i dukshëm pavarësisht nga mbingarkesa e fshehur. Pra, le të shtojmë mbushjen e sipërme dhe të poshtme të barabartë me lartësinë e figurës (300 piksele).
Rezultati deri më tani
Tani për tani ne mund të ndalemi këtu nëse doni të mbani dizajnin e galerisë pa ndonjë distancë midis imazheve. Ja se si duket rezultati deri më tani. Vini re se si imazhet lëvizin vertikalisht dhe horizontalisht saktësisht një bllok / kornizë.
Shtimi i hapësirës midis imazheve
Meqenëse vendosim gjerësinë e ullukut në 1, nuk kemi më një diferencë midis kolonave ose imazheve tona. Për të rikrijuar hapësira të ngjashme, ne mund të shtojmë mbushje në secilën kornizë.
Kjo do të na lejojë të krijojmë hapësirën që na nevojitet pa cenuar funksionalitetin e efekteve të lëvizjes. Kjo është e mundur sepse shtimi i mbushjes në figurë nuk do të rrisë gjerësinë ose lartësinë e kontejnerit të figurës. Ju gjithashtu mund të keni një efekt të ngjashëm duke përdorur edhe kufijtë.
Imazhi 1 Mbulesë
Hapni cilësimet në Imazhin 1 dhe azhurnoni sa vijon:
- Padding: 10 pixel në krye, 10 pixel në fund, 10 pixel në të majtë, 10 pixel në të djathtë
Shtrojeni mbushjen në të gjitha imazhet
Para se të kurseni, klikoni me të djathtën në opsionin e mbushjes dhe zgjidhni "Zgjero mbushjen". Në dritaren pop-up Extend Styles, klikoni në butonin Extend për të zgjeruar këtë mbushje në të gjitha imazhet në faqe.
Rezultati përfundimtar
Këtu është rezultati i gjithë punës që kemi bërë deri më tani.
Mendimet e fundit
Efekti rrëshqitës i rrotullimit të enigmës i paraqitur në këtë artikull bën më shumë sesa të na japë një dizajn unik për një galeri imazhesh. Ai gjithashtu thekson që kompensimet e lëvizjes horizontale dhe vertikale mund të përdoren për efekte më precize të lëvizjes.
Mos ngurroni të eksploroni variacione të ndryshme të kësaj paraqitje duke ndryshuar kompensimet dhe duke përzier vendet e imazheve.
Ju gjithashtu mund të ndryshoni numrin e kolonave për sa kohë që kuptoni se si do të ndryshojë madhësia e kolonës / imazhit dhe pastaj si të azhurnoni kompensimet e efektit të lëvizjes me vlerën përkatëse.
Disa burime të rekomanduara
Me siguri do t'i gjeni këto RESSOURCES interesante, sepse ato gjithashtu do t'ju lejojnë të krijoni galeri fotografish në tuaj blog WordPress.
- 10 shtojca për të krijuar galeritë e fotografive në WordPress
- Si të krijoni një galeri fotografish me shtojcën Envira
- Shtojcat 5 WordPress për të krijuar galeri foto
- Si të përdorni modulin e galerisë së imazheve në Divi
