Bildgallerier är en favoritdestination på de flesta webbplatser. Och i många fall kan det vara bäst att hålla dessa bildgallerier glada och statiska, så att bilderna fungerar sin magi.
Men lägg till en glidande pusselrullningseffekt till ett bildgalleri (som vi kommer att göra i den här tutorialen), kan ge en uppfriskande touch till en tidlös klassiker.
I denna handledning visar vi dig hur du bygger en enkel layout som avslöjar ett bildgalleri med en glidande pusselrullningseffekt på Divi.
Nyckeln är att förstå hur storleken på bilderna relaterar till de vertikala och horisontella förskjutningsvärdena för varje rullningseffekt för att flytta bilden exakt en punkt. Men när den är klar är den resulterande rörelseeffekten skarp och exakt när den gradvis monteras och avslöjar ett bildgalleri på ett unikt sätt.
Möjligt resultat
Här är en översikt över bildgallerilayouten med den glidande pusselbläddringseffekten som vi ska skapa i denna handledning.
Skapa rubriksektionen
För att komma igång, låt oss bygga ett snabbt rubrikavsnitt som berättar för användaren att bläddra på sidan för att visa galleriet och med de fantastiska rullningseffekterna.
Lägg till en rad
Lägg till en rad med en kolumn i standardavsnittet.
Lägg till en textmodul
Inuti kolumnen / raden lägger du till en ny textmodul.
Uppdatera kroppsinnehållet i textinställningarna med följande:
<h1>Image Gallery</h1>
Inställningar för textmodul
På fliken Design uppdaterar du textdesignen enligt följande:
- Titel typsnitt: Roboto
- Titel typsnitt vikt: fetstil
- Titelstilsstil: TT
- Rubriktextjustering: Mitt
- Rubriktextstorlek: 50 pixlar (skrivbord), 40 pixlar (surfplatta och telefon)
- Titelbokstavsavstånd: 4px
Lägg till en modulikon för oskärpa
När texten är på plats lägger du till en ny presentationstextmodul under textmodulen.
Ta sedan bort all titel och huvudtext från standardinnehållet och välj att använda nedåtpilen.
Inställningar för presentationstekst
Uppdatera sedan presentationstextinställningarna med en ny färg och en upprepad bildanimering.
- Ikonfärg: # ffb500
- Animeringsstil: Bild
- Animeringsriktning: ner
- Animationsintensitet: 20%
- Upprepning av animering: loop
Avsnitt stoppning
För att ge avsnittet utrymme för rullning uppdaterar du polstret på följande sätt:
- Polstring: 20vh ovan, 50vh nedan
Här använder vi den längdenhet vh som är relativt höjden på webbläsarfönstret så att avståndet passar konsekvent över alla webbläsarstorlekar.
Skapande av bildgalleri med rullningseffekter
Nu när vår rubriksektion är klar är vi redo att bygga det faktiska bildgalleriet med de glidande pusseleffekterna. Hela galleriet består av tre rader med fyra bilder / kolumner i varje rad för att göra totalt 4 bilder. Du kan dock enkelt lägga till fler rader och bilder i layouten när den är klar.
Skapa avsnitt och rad
Lägg till en ny sektion
Låt oss börja med att lägga till ett nytt vanligt avsnitt under titelavsnittet.
Lägg till en rad
Lägg sedan till en rad med fyra kolumner i avsnittet.
Linjeinställningar
Uppdatera följande under radinställningarna:
- Rännbredd: 1
- Bredd: 100%
- Maximal bredd: 1200 px (skrivbord), 600 px (surfplatta), 300 px (telefon)
Hur linjebredden avgör bildstorlek
Bredden på raden är mycket viktig för denna design eftersom den kommer att diktera bredden på var och en av de fyra kolumnerna. När vi väl har satt takrännans bredd till 1 kommer det inte att finnas mer marginal mellan bilderna.
Och när vi ställer in maximal bredd till 1200px kommer fyra kolumnlayout att göra var och en av kolumnerna / bilderna exakt 300px breda (1200px / 4 = 300px).
Eftersom var och en av bilderna är kvadratisk vet vi också att höjden på varje bild också kommer att vara 300 pixlar. Vi behöver inte hålla det så om vi inte vill.
Till exempel kan vi också välja att ha en tre kolumnlayout med bilder på 400 x 400 pixlar. Att känna till bildbredden (300px) och höjden (även 300px) är nyckeln till att skapa rullningseffekten senare.
Lägga till bilder
Lägg till bild 1
Bild 1 Ruleffekter
Förhållandet mellan bildstorlek och rullningseffektförskjutningar
När du använder den vertikala och horisontella rullningseffekten är det viktigt att förstå vad det angivna numeriska värdet representerar. I det här exemplet har vi en vertikal flyttningsförskjutning på -3. Denna -3 är faktiskt -300px (eller 300px ner) vilket är bredden på bilden.
Offset når sedan 0 (hempositionen) när användaren rullar. Det är detta som skapar rullningseffekten som flyttar bilden till exakt ett block / ram. Horisontell rörelse börjar vid 3 (300 pixlar från höger) och stannar i sin standardposition. Dessa två effekter kombineras för att skapa en unik tvådelad rullningseffekt.
Lägg till bild 2
Efter att rullningseffekter har lagts till i bilden 1. Lägg till en ny bild i kolumn 2.
Vi kommer att lämna denna statiska bild utan någon rullande effekt.
Lägg till bild 3
Lägg sedan till en annan bildmodul i kolumn 3 och uppdatera modulen med en ny bild.
Bild 3 Ruleffekter
Uppdatera följande rullningseffekter under bildinställningar:
Under fliken Horisontell rörelse ...
- Aktivera horisontell rörelse: JA
- Start offset: -3 (vid 0% av fönstret)
- Genomsnittlig förskjutning: 0 (vid 15% av visningsområdet)
- Slutförskjutning: 0 (vid 100% av visningsområdet)
Lägg till bild 4
För att skapa den sista bilden, kopiera bild 1 och klistra in den i kolumn 4.
Ladda upp en ny bild i bildinställningarna.
Bild 4 Ruleffekter
Uppdatera sedan följande rullningseffekter:
Under fliken Vertikal rörelse ...
- Aktivera vertikal rörelse: YES
- Start offset: 3 (vid 0% av fönstret)
- Genomsnittlig förskjutning: 0 (vid 15% -28% av visningsområdet)
- Slutförskjutning: 0 (vid 40% av visningsområdet)
Under fliken Horisontell rörelse ...
- Aktivera horisontell rörelse: JA
- Start offset: 3 (vid 0% av fönstret)
- Genomsnittlig förskjutning: 3 (vid 28% av visningsområdet)
- Slutförskjutning: 0 (vid 40% av visningsområdet)
Duplicera raden
Nu när bildrullningseffekterna är klara för den första raden behöver vi bara duplicera raden för att skapa fler bilder och deras motsvarande rullningseffekter. För det här exemplet, låt oss duplicera raden två gånger för att skapa totalt tre rader.
Byt ut och ordna om bilder efter behov
Sedan kan vi flytta bilderna med hjälp av dra och släpp-funktionen vart vi vill. Det är här du kan bli kreativ och se hur de rörliga bilderna rullar. Och när bilderna väl är på plats kan du byta ut innehållet i bildmodulen med nya bilder som möter behoven hos webbplats.
Sista touch-ups
Sektionens synlighet
Eftersom våra bilder förmodligen sträcker sig utanför avsnittet / fönstret, låt oss dölja överflödet för att rensa upp det lite. Öppna sektionsinställningar och uppdatera följande:
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
Avsnitt stoppning
Vi vill att den vertikala rullningseffekten av toppbilden (som sträcker sig ovanför avsnittet) ska vara synlig trots det dolda överflödet. Så låt oss lägga till topp och botten vaddering lika med bildhöjden (300 pixlar).
Resultat hittills
Just nu kan vi stanna här om du vill behålla galleridesignen utan något avstånd mellan bilderna. Så här ser resultatet ut hittills. Lägg märke till hur bilderna rör sig vertikalt och horisontellt exakt ett block / ram.
Lägger till utrymme mellan bilder
Eftersom vi ställer in rännbredden till 1 har vi inte längre en marginal mellan våra kolumner eller bilder. För att återskapa liknande avstånd kan vi lägga till fyllning i varje ram.
Detta gör det möjligt för oss att skapa det avstånd vi behöver utan att kompromissa med funktionaliteten för rullningseffekterna. Detta är möjligt eftersom att lägga till stoppning till bilden inte ökar bildbehållarens bredd eller höjd. Du kan också ha en liknande effekt genom att använda gränser också.
Polstring av bild 1
Öppna inställningarna för bild 1 och uppdatera följande:
- Polstring: 10 pixlar längst upp, 10 pixlar längst ner, 10 pixlar till vänster, 10 pixlar till höger
Förläng fyllningen till alla bilder
Högerklicka på stoppningsalternativet och välj "Förläng padding" innan du sparar. I popup-fönstret Expand Styles klickar du på knappen Extend för att utöka denna fyllning till alla bilder på sidan.
Slutresultat
Här är resultatet av allt arbete vi har gjort hittills.
Avslutande tankar
Den glidande pusselrullningseffekten som visas i den här artikeln gör mer än att ge oss en unik design för ett bildgalleri. Det påpekar också att horisontella och vertikala rörelseförskjutningar kan användas för mer exakta rullningseffekter.
Utforska gärna olika variationer av denna layout genom att ändra förskjutningarna och blanda samman platsen för bilderna.
Du kan också ändra antalet kolumner så länge du förstår hur kolumnen / bildstorleken kommer att ändras och sedan hur du uppdaterar rullningseffekterna med motsvarande värde.
Några rekommenderade resurser
Du kommer förmodligen hitta dessa medel intressant eftersom de också låter dig skapa fotogallerier på din Wordpress blogg.
- 10 plugins för att skapa fotogallerier på WordPress
- Hur man skapar ett fotogalleri med Envira-plugin
- 5 WordPress plugins för att skapa fotogallerier
- Hur man använder bildgallerimodulen på Divi
