Galerije slika su omiljeno odredište na većini web stranica. U mnogim slučajevima možda je najbolje te galerije slika održavati sretnima i statičnim, dopuštajući im da slike djeluju magično.
Ali, dodajte efekt pomicanja klizne zagonetke galerija slika (kao što ćemo učiniti u ovom udžbeniku) može dati osvježavajući dodir bezvremenskom klasiku.
U ovom vodiču pokazat ćemo vam kako izraditi jednostavan izgled koji otkriva galeriju slika s kliznim efektom pomicanja slagalice na Divi.
Ključno je razumjeti kako se veličina slika odnosi na okomite i vodoravne vrijednosti pomaka svakog efekta pomicanja kako bi se slika pomaknula točno za jednu točku. Ali kada je dovršen, rezultirajući efekt pokreta oštar je i precizan jer postupno sastavlja i otkriva galeriju slika na jedinstven način.
Mogući ishod
Evo pregleda izgleda galerije slika s kliznim efektom pomicanja slagalice koji ćemo stvoriti u ovom vodiču.
Izrada odjeljka zaglavlja
Za početak napravimo brzi odjeljak zaglavlja koji će reći korisniku da pomiče stranicu za pregled galerije i s nevjerojatnim efektima pomicanja.
Dodajte red
Dodajte red od jednog stupca u zadani odjeljak.
Dodajte tekstualni modul
Unutar stupca / retka dodajte novi modul za tekst.
U tekstualnim postavkama ažurirajte sadržaj tijela sa sljedećim:
<h1>Image Gallery</h1>
Postavke tekstualnog modula
Na kartici Dizajn ažurirajte dizajn teksta na sljedeći način:
- Font naslova: Roboto
- Težina naslovnog slova: podebljano
- Stil fonta naslova: TT
- Poravnanje teksta zaglavlja: Sredina
- Veličina teksta zaglavlja: 50 piksela (stolno računalo), 40 piksela (tableti i telefon)
- Razmak između naslova: 4 px
Dodajte ikonu modula Blur
Nakon što je tekst na mjestu, dodajte novi tekstualni modul pod tekstualni modul.
Zatim uklonite sav naslov i sadržaj sa zadanog sadržaja i odaberite da biste koristili ikonu strelice prema dolje.
Postavke teksta prezentacije
Zatim ažurirajte postavke teksta prezentacije s novom bojom i ponavljanjem animacije dijapozitiva.
- Boja ikone: # ffb500
- Stil animacije: dijapozitiv
- Smjer animacije: dolje
- Intenzitet animacije: 20%
- Ponavljanje animacije: petlja
Obloga odsjeka
Da biste prostoru dali prostor za pomicanje, ažurirajte padding na sljedeći način:
- Padding: 20vh iznad, 50vh ispod
Ovdje koristimo jedinicu duljine vh koja je u odnosu na visinu prozora preglednika, tako da razmak dosljedno odgovara svim veličinama preglednika.
Stvaranje galerije slika s efektima pomicanja
Sad kad je naš odjeljak zaglavlja dovršen, spremni smo za izgradnju stvarne galerije slika s efektima pomicanja klizne slagalice. Cijela galerija sastojat će se od tri reda s po 4 slike / stupca u svakom retku kako bi se dobilo ukupno 12 slika. Međutim, možete jednostavno dodati više linija i slika u izgled nakon što je završen.
Stvaranje odjeljka i crte
Dodajte novi odjeljak
Započnimo dodavanjem novog redovnog odjeljka pod naslovnim odjeljkom.
Dodajte red
Zatim dodajte redak s četiri stupca u odjeljak.
Postavke linije
Pod postavkama retka ažurirajte sljedeće:
- Širina oluka: 1
- Širina: 100%
- Maksimalna širina: 1200 px (desktop), 600 px (tablet), 300 px (telefon)
Kako širina crte određuje veličinu slike
Širina reda vrlo je važna za ovaj dizajn jer će odrediti širinu svakog od četiri stupca. Jednom kada postavimo širinu žlijeba na 1, više neće biti margine između slika.
A kad postavimo maksimalnu širinu na 1200px, izgled četiri stupca učinit će svaki od stupaca / slika točno 300px širok (1200px / 4 = 300px).
Također, budući da je svaka slika kvadratna, znamo da će i visina svake slike biti 300 piksela. Ne moramo tako i držati ako to ne želimo.
Na primjer, mogli bismo odabrati i raspored s tri stupca sa slikama od 400 x 400 piksela. Poznavanje širine slike (300px) i visine (također 300px) bit će ključ za kasnije stvaranje efekta pomicanja.
Dodavanje slika
Dodajte sliku 1
Slika 1 Učinci pomicanja
Povezanost veličine slike i pomaka efekta pomicanja
Kada koristite vertikalni i vodoravni efekt pomicanja, važno je razumjeti što predstavlja unesena numerička vrijednost. U ovom primjeru imamo pomak okomitog početka pomicanja od -3. Ovo -3 je zapravo -300px (ili 300px dolje), što je širina slike.
Pomak tada doseže 0 (početni položaj) kada se korisnik pomakne. To je ono što stvara efekt pomicanja koji pomiče sliku u točno jedan blok / kadar. Horizontalno kretanje započinje s 3 (300 piksela zdesna) i zaustavlja se u svom zadanom položaju. Ova dva efekta kombiniraju se i stvaraju jedinstveni dvodijelni efekt pomicanja.
Dodajte sliku 2
Nakon dodavanja efekata pomicanja na sliku 1. U stupac 2 dodajte novu sliku.
Ovu ćemo statičku sliku ostaviti bez efekta pomicanja.
Dodajte sliku 3
Zatim dodajte drugi modul slike u stupac 3 i ažurirajte modul novom slikom.
Slika 3 Učinci pomicanja
U odjeljku Postavke slike ažurirajte sljedeće efekte pomicanja:
Pod karticom Horizontalno kretanje ...
- Uključite vodoravno kretanje: DA
- Početak pomaka: -3 (na 0% prozora)
- Prosječni pomak: 0 (pri 15% prikaza)
- Krajnji pomak: 0 (na 100% vidnog polja)
Dodajte sliku 4
Da biste stvorili posljednju sliku, kopirajte sliku 1 i zalijepite je u stupac 4.
U postavke slike prenesite novu sliku.
Slika 4 Učinci pomicanja
Zatim ažurirajte sljedeće efekte pomicanja:
Pod karticom Okomito kretanje ...
- Uključite okomito kretanje: DA
- Početni pomak: 3 (na 0% prozora)
- Prosječni pomak: 0 (pri 15% -28% vidnog polja)
- Krajnji pomak: 0 (na 40% vidnog polja)
Pod karticom Horizontalno kretanje ...
- Uključite vodoravno kretanje: DA
- Početni pomak: 3 (na 0% prozora)
- Prosječni pomak: 3 (pri 28% prikaza)
- Krajnji pomak: 0 (na 40% vidnog polja)
Dvostruka linija
Sad kad su učinci pomicanja slike gotovi za prvi redak, sve što trebamo učiniti je duplicirati redak kako bismo stvorili više slika i njihove odgovarajuće efekte pomicanja. U ovom primjeru dupliciramo red dva puta kako bismo stvorili ukupno tri retka.
Zamijenite i preuredite slike po potrebi
Zatim možemo premjestiti slike pomoću funkcije povuci i ispusti gdje god želimo. Ovdje možete biti kreativni i vidjeti kako će se pokretne slike pomicati. A kada su slike postavljene, možete zamijeniti sadržaj modula slika novim slikama koje zadovoljavaju potrebe web stranica.
Posljednji dodaci
Vidljivost odjeljka
Budući da će se naše slike vjerojatno proširiti izvan odjeljka / prozora, sakrijemo preljev da ga malo očistimo. Otvorite postavke odjeljka i ažurirajte sljedeće:
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
Obloga odsjeka
Želimo da efekt vertikalnog pomicanja gornje slike (koji se proteže iznad odjeljka) bude vidljiv unatoč skrivenom preljevu. Dakle, dodajmo gornje i donje uloške jednake visini slike (300 piksela).
Dosadašnji rezultat
Trenutno se ovdje možemo zaustaviti ako želite zadržati dizajn galerije bez ikakvog razmaka između slika. Evo kako dosad izgleda rezultat. Primijetite kako se slike pomiču okomito i vodoravno točno jedan blok / kadar.
Dodavanje razmaka između slika
Budući da smo postavili širinu žlijeba na 1, više nemamo margine između stupaca ili slika. Da bismo ponovno stvorili slične razmake, u svaki kadar možemo dodati ispunu.
To će nam omogućiti stvaranje razmaka koji nam je potreban bez ugrožavanja funkcionalnosti efekata pomicanja. To je moguće jer dodavanje umota na sliku neće povećati širinu ili visinu spremnika slike. Sličan učinak možete imati i korištenjem obruba.
Slika 1 Padding
Otvorite postavke za sliku 1 i ažurirajte sljedeće:
- Padding: 10 piksela na vrhu, 10 piksela na dnu, 10 piksela na lijevoj strani, 10 piksela s desne strane
Proširite ispunite na sve slike
Prije spremanja, kliknite desnu tipku miša na opciju paddinga i odaberite "Extend padding". U skočnom prozoru za proširivanje stilova kliknite gumb za proširivanje da biste proširili ovo popunjavanje na sve slike na stranici.
Konačni rezultat
Evo rezultata svih dosadašnjih poslova.
Završne misli
Učinak klizanja slagalice prikazan u ovom članku daje nam više nego jedinstveni dizajn galerije slika. Također ističe da se pomaci vodoravnog i okomitog pomicanja mogu koristiti za preciznije efekte pomicanja.
Slobodno istražite različite varijacije ovog izgleda mijenjajući pomake i miješajući mjesta na slikama.
Također možete promijeniti broj stupaca sve dok razumijete kako će se promijeniti veličina stupca / slike, a zatim kako ažurirati pomake efekta pomicanja s odgovarajućom vrijednošću.
Neki preporučeni resursi
Vjerojatno ćete ih pronaći sredstva zanimljivi jer će vam također omogućiti stvaranje fotogalerija na vašem WordPress blog.
- 10 dodataka za stvaranje fotogalerija na WordPressu
- Kako stvoriti fotogaleriju s dodatkom Envira
- 5 WordPress dodataka za stvaranje foto galerije
- Kako koristiti modul galerije slika na Divi
