Obrázkové galérie sú obľúbeným cieľom väčšiny webových stránok. A v mnohých prípadoch môže byť najlepšie udržiavať tieto galérie obrázkov veselé a statické, aby obrázky pôsobili svoje kúzlo.
Ale pridajte posuvné posúvanie logických efektov galéria obrázkov (ako to urobíme v tomto návode), môže osviežiť dotyk nadčasovej klasiky.
V tomto tutoriáli vám ukážeme, ako vytvoriť jednoduché rozloženie, ktoré odhaľuje galériu obrázkov s efektom posúvania rolovacích hlavolamov v aplikácii Divi.
Kľúčom je pochopiť, ako veľkosť obrázkov súvisí s hodnotami vertikálneho a horizontálneho posunutia každého efektu posúvania, aby sa obraz posunul presne o jeden bod. Po dokončení je ale výsledný pohybový efekt ostrý a presný, pretože sa jedinečným spôsobom postupne zostavuje a odhaľuje galériu obrázkov.
Možný výsledok
Tu je prehľad rozloženia galérie obrázkov s efektom posúvania posúvacích puzzle, ktorý vytvoríme v tomto návode.
Vytvára sa sekcia hlavičky
Na začiatok si vytvorme sekciu s hlavičkou, ktorá bude informovať používateľa, aby sa posúval po stránke a zobrazil galériu s úžasnými efektmi posúvania.
Pridajte riadok
Pridajte riadok jedného stĺpca do predvolenej sekcie.
Pridajte textový modul
Vo vnútri stĺpca / riadku pridajte nový textový modul.
V nastaveniach textu aktualizujte obsah tela nasledujúcim spôsobom:
<h1>Image Gallery</h1>
Nastavenia textového modulu
Na karte Dizajn aktualizujte textový návrh takto:
- Písmo názvu: Roboto
- Hmotnosť písma názvu: tučné
- Štýl písma názvu: TT
- Zarovnanie textu hlavičky: na stred
- Veľkosť textu hlavičky: 50px (desktop), 40px (tablet a telefón)
- Riadkovanie písmen: 4px
Pridajte ikonu modulu Blurb
Po zavedení textu pridajte do textového modulu nový modul prezentácie.
Potom odstráňte všetok nadpis a text z predvoleného obsahu a pomocou šípky nadol vyberte použitie.
Nastavenia textu prezentácie
Potom aktualizujte nastavenie textu prezentácie novou farbou a opakujúcou sa animáciou snímky.
- Farba ikony: # ffb500
- Štýl animácie: Snímka
- Smer animácie: dole
- Intenzita animácie: 20%
- Opakovanie animácie: slučka
Čalúnenie sekcie
Ak chcete oddielu dať priestor na posúvanie, aktualizujte výplň nasledovne:
- Výplň: 20 hodín nad, 50 hodín pod
Tu používame jednotku dĺžky vh, ktorá je relatívna k výške okna prehliadača, aby sa rozstupy zhodovali konzistentne so všetkými veľkosťami prehliadača.
Vytvorenie galérie obrázkov s efektmi posúvania
Teraz, keď je naša sekcia hlavičky hotová, sme pripravení vytvoriť skutočnú galériu obrázkov pomocou posuvných efektov posúvania puzzle. Celá galéria bude pozostávať z troch riadkov po 4 obrázkoch / stĺpcoch v každom riadku, aby ste vytvorili celkom 12 obrázkov. Po dokončení rozloženia však môžete do rozloženia ľahko pridať ďalšie riadky a obrázky.
Vytvorenie sekcie a čiary
Pridajte novú sekciu
Začnime pridaním novej pravidelnej sekcie do nadpisovej sekcie.
Pridajte riadok
Potom do sekcie pridajte riadok so štyrmi stĺpcami.
Nastavenie linky
V časti Nastavenie linky aktualizujte nasledujúce informácie:
- Šírka odkvapov: 1
- Šírka: 100%
- Maximálna šírka: 1200 px (na pracovnej ploche), 600 px (na tablete), 300 px (na telefóne)
Ako šírka čiary určuje veľkosť obrázka
Šírka riadku je pre tento dizajn veľmi dôležitá, pretože bude určovať šírku každého zo štyroch stĺpcov. Akonáhle nastavíme šírku odkvapu na 1, medzi obrázkami už nebude žiadny okraj.
A keď nastavíme maximálnu šírku na 1200px, rozloženie štyroch stĺpcov spôsobí, že každý zo stĺpcov / obrázkov bude mať šírku presne 300px (1200px / 4 = 300px).
Pretože je každý z obrázkov štvorcový, vieme, že výška každého obrázka bude tiež 300 pixelov. Nemusíme to tak držať, ak nechceme.
Mohli by sme si napríklad zvoliť rozloženie v troch stĺpcoch s obrázkami 400 x 400 pixelov. Poznanie šírky (300 pixelov) a výšky (tiež 300 pixelov) obrázka bude kľúčom k vytvoreniu efektu posúvania neskôr.
Pridávanie obrázkov
Pridať obrázok 1
Obrázok 1 Posúvacie efekty
Vzťah medzi veľkosťou obrázka a posunom efektu posuvu
Pri použití efektu vertikálneho a horizontálneho posúvania je dôležité pochopiť, čo predstavuje zadaná číselná hodnota. V tomto príklade máme posunutie začiatku vertikálneho pohybu o -3. Táto hodnota -3 je v skutočnosti –300 pixelov (alebo 300 pixelov nadol), čo je šírka obrázka.
Posun potom dosiahne 0 (východisková pozícia), keď používateľ roluje. To je to, čo vytvára efekt rolovania, ktorý posúva obraz presne na jeden blok / rámček. Horizontálny pohyb začína na 3 (300 pixelov sprava) a zastaví sa na svojej predvolenej pozícii. Tieto dva efekty kombinujú a vytvárajú jedinečný dvojdielny posúvací efekt.
Pridať obrázok 2
Po pridaní efektov posúvania k obrázku 1. Pridajte nový obrázok do stĺpca 2.
Tento statický obrázok ponecháme bez posúvacieho efektu.
Pridať obrázok 3
Potom do stĺpca 3 pridajte ďalší modul obrázka a modul aktualizujte o nový obrázok.
Obrázok 3 Posúvacie efekty
V časti Nastavenia obrázka aktualizujte nasledujúce efekty posúvania:
Na karte Horizontálny pohyb ...
- Aktivujte horizontálny pohyb: ÁNO
- Počiatočný posun: -3 (pri 0% okna)
- Priemerný posun: 0 (pri 15% výrezu)
- Koncový posun: 0 (pri 100% výrezu)
Pridať obrázok 4
Ak chcete vytvoriť posledný obrázok, skopírujte obrázok 1 a vložte ho do stĺpca 4.
V nastaveniach obrázka nahrajte nový obrázok.
Obrázok 4 Posúvacie efekty
Potom aktualizujte nasledujúce efekty posúvania:
Na karte Vertikálny pohyb ...
- Aktivujte vertikálny pohyb: ÁNO
- Počiatočný posun: 3 (pri 0% okna)
- Priemerný posun: 0 (pri 15% - 28% výrezu)
- Koncový posun: 0 (pri 40% výrezu)
Na karte Horizontálny pohyb ...
- Aktivujte horizontálny pohyb: ÁNO
- Počiatočný posun: 3 (pri 0% okna)
- Priemerný posun: 3 (pri 28% výrezu)
- Koncový posun: 0 (pri 40% výrezu)
Duplicitný riadok
Teraz, keď sú efekty rolovania obrázkov urobené pre prvý riadok, stačí iba duplikovať riadok a vytvoriť tak viac obrázkov a ich príslušné efekty rolovania. V tomto príklade poďme duplikovať riadok dvakrát, aby sme vytvorili celkom tri riadky.
Podľa potreby vymeňte a usporiadajte obrázky
Potom môžeme obrázky presúvať pomocou funkcie drag and drop, kam chceme. Tu môžete byť kreatívni a vidieť, ako sa budú pohyblivé obrázky posúvať. A keď sú obrázky na svojom mieste, môžete nahradiť obsah modulu obrázkov novými obrázkami, ktoré spĺňajú potreby webové stránky.
Záverečné opravy
Viditeľnosť sekcie
Pretože sa naše obrázky pravdepodobne rozšíria mimo sekciu / okno, skryjeme prepad, aby sme ho trochu vyčistili. Otvorte nastavenia sekcie a aktualizujte nasledujúce položky:
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
Čalúnenie sekcie
Chceme, aby bol efekt vertikálneho posúvania horného obrázka (ktorý sa rozprestiera nad časťou) viditeľný aj napriek skrytému pretečeniu. Pridajme teda hornú a spodnú výplň rovnajúcu sa výške obrázka (300 pixelov).
Výsledok zatiaľ
Práve teraz sa tu môžeme zastaviť, ak chcete zachovať dizajn galérie bez akýchkoľvek medzier medzi obrázkami. Takto zatiaľ vyzerá výsledok. Všimnite si, ako sa obrázky pohybujú vertikálne a horizontálne presne o jeden blok / rámček.
Pridanie medzery medzi obrázkami
Pretože sme nastavili šírku odkvapu na 1, medzi našimi stĺpmi alebo obrázkami už nemáme okraj. Ak chcete znova vytvoriť podobné medzery, môžeme do každého rámca pridať výplň.
To nám umožní vytvoriť potrebné medzery bez toho, aby bola dotknutá funkčnosť efektov posúvania. Je to možné, pretože pridanie polstrovania k obrázku nezvýši šírku ani výšku kontajnera s obrázkom. Podobný efekt môžete dosiahnuť aj pomocou okrajov.
Polstrovanie obrázka 1
Otvorte nastavenia na obrázku 1 a aktualizujte nasledovné:
- Výplň: 10 pixelov hore, 10 pixelov dole, 10 pixelov vľavo, 10 pixelov vpravo
Rozšírte výplň na všetky obrázky
Pred uložením kliknite pravým tlačidlom myši na možnosť polstrovania a vyberte možnosť „Rozšíriť polstrovanie“. V rozbaľovacom okne Rozbaliť štýly kliknutím na tlačidlo Rozšíriť rozšírite túto výplň na všetky obrázky na stránke.
Konečný výsledok
Tu je výsledok všetkej práce, ktorú sme doteraz vykonali.
záverečné myšlienky
Efekt posúvania posúvacích puzzle, ktorý je uvedený v tomto článku, nám dáva viac ako jedinečný dizajn galérie obrázkov. Poukazuje tiež na to, že na presnejšie rolovanie je možné použiť posunutie vodorovného a zvislého pohybu.
Nebojte sa preskúmať rôzne variácie tohto rozloženia zmenou odsadenia a zmiešaním umiestnenia obrázkov.
Môžete tiež zmeniť počet stĺpcov, pokiaľ rozumiete tomu, ako sa zmení veľkosť stĺpca / obrázka a ako potom aktualizovať posunutia efektu posuvu o zodpovedajúcu hodnotu.
Niektoré odporúčané zdroje
Pravdepodobne nájdete tieto zdroje zaujímavé, pretože vám tiež umožnia vytvárať fotogalérie na vašom počítači WordPress blog.
- 10 doplnkov na vytvorenie fotogalérie na WordPress
- Ako vytvoriť galériu fotografií pomocou doplnku Envira
- 5 WordPress pluginy na vytváranie fotogalérií
- Ako používať modul galérie obrázkov v aplikácii Divi
