Galeriile de imagini sunt o destinație preferată pe majoritatea site-urilor web. Și, în multe cazuri, poate fi cel mai bine să păstrezi acele galerii de imagini fericite și statice, lăsând imaginile să-și lucreze magia.
Dar, adăugați un efect de derulare a puzzle-ului glisant la o galerie de imagini (așa cum vom face în acest tutorial), poate da o notă răcoritoare unui clasic atemporal.
În acest tutorial, vă vom arăta cum să construiți un aspect simplu care dezvăluie o galerie de imagini cu un efect de derulare a puzzle-ului glisant pe Divi.
Cheia este de a înțelege modul în care dimensiunea imaginilor se referă la valorile de decalare verticale și orizontale ale fiecărui efect de derulare pentru a muta imaginea exact cu un punct. Dar, când este finalizat, efectul de mișcare rezultat este clar și precis, deoarece asamblează treptat și dezvăluie o galerie de imagini într-un mod unic.
Rezultat posibil
Iată o prezentare generală a aspectului galeriei de imagini cu efectul de derulare a puzzle-ului glisant pe care îl vom crea în acest tutorial.
Crearea secțiunii antet
Pentru a începe, să construim o secțiune rapidă de antet care îi va spune utilizatorului să deruleze pagina pentru a vizualiza galeria și cu efectele de derulare minunate.
Adăugați un rând
Adăugați un rând dintr-o coloană la secțiunea implicită.
Adăugați un modul de text
În interiorul coloanei / rândului adăugați un nou modul de text.
În setările de text, actualizați conținutul corpului cu următoarele:
<h1>Image Gallery</h1>
Setările modulului text
În fila Proiectare, actualizați designul textului după cum urmează:
- Fontul titlului: Roboto
- Greutatea fontului din titlu: bold
- Stilul fontului de titlu: TT
- Aliniere text antet: centru
- Dimensiunea textului antetului: 50 px (desktop), 40 px (tabletă și telefon)
- Spațiu litere titlu: 4px
Adăugați pictograma modulului Blurb
Odată ce textul este la locul său, adăugați un nou modul de blurb sub modulul de text.
Apoi eliminați toate titlurile și corpurile din conținutul implicit și selectați pentru a utiliza pictograma săgeată în jos.
Setări text prezentare
Apoi actualizați setările de blurb cu o nouă culoare și repetând animația de diapozitive.
- Culoare pictogramă: # ffb500
- Stil de animație: Slide
- Direcția animației: în jos
- Intensitatea animației: 20%
- Repetați animația: buclă
Căptușeală de secțiune
Pentru a oferi secțiunii spațiu pentru derulare, actualizați umplutura după cum urmează:
- Garnitura: 20vh în partea de sus, 50vh în partea de jos
Aici folosim unitatea de lungime vh, care este relativă la înălțimea ferestrei browserului, astfel încât spațiul să se potrivească în mod constant pe toate dimensiunile browserului.
Crearea galeriei de imagini cu efecte de derulare
Acum că secțiunea noastră de antet este completă, suntem gata să construim galeria de imagini cu efectele de derulare a puzzle-ului glisant. Întreaga galerie va fi formată din trei rânduri de 4 imagini / coloane în fiecare rând pentru a face un total de 12 imagini. Cu toate acestea, puteți adăuga cu ușurință mai multe linii și imagini la aspect după finalizarea acestuia.
Crearea secțiunii și a liniei
Adăugați o secțiune nouă
Să începem adăugând o nouă secțiune obișnuită sub secțiunea titlu.
Adăugați un rând
Apoi adăugați un rând cu patru coloane în secțiune.
Setări de linie
Sub Setări rând, actualizați următoarele:
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățime maximă: 1200 px (desktop), 600 px (tabletă), 300 px (telefon)
Modul în care lățimea liniei determină dimensiunea imaginii
Lățimea rândului este foarte importantă pentru acest design, deoarece va dicta lățimea fiecăreia dintre cele patru coloane. Odată ce am setat lățimea jgheabului la 1, nu va mai exista marjă între imagini.
Și când vom seta lățimea maximă la 1200px, cele patru coloane vor face ca fiecare dintre coloane / imagini să fie exact 300px lățime (1200px / 4 = 300px).
De asemenea, deoarece fiecare dintre imagini este pătrată, știm că înălțimea fiecărei imagini va fi, de asemenea, de 300 de pixeli. Nu trebuie să o păstrăm așa dacă nu vrem.
De exemplu, am putea alege, de asemenea, să avem un aspect cu trei coloane cu imagini de 400 x 400 pixeli. Cunoașterea lățimii imaginii (300px) și a înălțimii (de asemenea, 300px) va fi cheia pentru crearea efectului de derulare ulterior.
Adăugarea de imagini
Adăugați imaginea 1
Imaginea 1 Efecte de derulare
Relația dintre dimensiunea imaginii și compensarea efectului de derulare
Când utilizați efectul de derulare verticală și orizontală, este important să înțelegeți ce reprezintă valoarea numerică introdusă. În acest exemplu, avem o deplasare verticală de -3. Acest -3 este de fapt -300px (sau 300px în jos), care este lățimea imaginii.
Decalajul atinge apoi 0 (poziția de pornire) atunci când utilizatorul derulează. Aceasta creează efectul de derulare care mută imaginea exact la un bloc / cadru. Mișcarea orizontală începe de la 3 (300 pixeli din dreapta) și se oprește în poziția sa implicită. Aceste două efecte se combină pentru a crea un efect unic de derulare în două părți.
Adăugați imaginea 2
După adăugarea efectelor de derulare la imaginea 1. Adăugați o imagine nouă în coloana 2.
Vom lăsa această imagine statică fără niciun efect de derulare.
Adăugați imaginea 3
Apoi adăugați un alt modul de imagine în coloana 3 și actualizați modulul cu o imagine nouă.
Imaginea 3 Efecte de derulare
Sub Setări imagine, actualizați următoarele efecte de derulare:
Sub fila Mișcare orizontală ...
- Activați mișcarea orizontală: DA
- Start offset: -3 (la 0% din fereastră)
- Decalaj mediu: 0 (la 15% din vizualizare)
- Decalaj final: 0 (la 100% din vizualizare)
Adăugați imaginea 4
Pentru a crea ultima imagine, copiați imaginea 1 și lipiți-o în coloana 4.
Încărcați o imagine nouă în setările imaginii.
Imaginea 4 Efecte de derulare
Apoi actualizați următoarele efecte de derulare:
Sub fila Mișcare verticală ...
- Activați mișcarea verticală: DA
- Start offset: 3 (la 0% din fereastră)
- Decalaj mediu: 0 (la 15% -28% din vizualizare)
- Decalaj final: 0 (la 40% din vizualizare)
Sub fila Mișcare orizontală ...
- Activați mișcarea orizontală: DA
- Start offset: 3 (la 0% din fereastră)
- Decalaj mediu: 3 (la 28% din vizualizare)
- Decalaj final: 0 (la 40% din vizualizare)
Linie duplicată
Acum că efectele de derulare a imaginii sunt efectuate pentru primul rând, tot ce trebuie să facem este să dublăm rândul pentru a crea mai multe imagini și efectele de derulare corespunzătoare. Pentru acest exemplu, să duplicăm rândul de două ori pentru a crea un total de trei rânduri.
Înlocuiți și rearanjați imaginile după cum este necesar
Apoi putem muta imaginile folosind funcția drag and drop oriunde vrem. Aici puteți deveni creativ și puteți vedea cum se vor derula imaginile în mișcare. Și odată ce imaginile sunt la locul lor, puteți înlocui conținutul modulului de imagini cu imagini noi care să răspundă nevoilor site-ul web.
Răspunsuri finale
Vizibilitatea secțiunii
Deoarece imaginile noastre se vor extinde probabil în afara secțiunii / ferestrei, să ascundem preaplinul pentru a-l curăța puțin. Deschideți setările secțiunii și actualizați următoarele:
- Debord de orizontală: ascuns
- Debord vertical: ascuns
Căptușeală de secțiune
Vrem ca efectul de derulare verticală a imaginii de sus (care se extinde deasupra secțiunii) să fie vizibil în ciuda revărsării ascunse. Deci, să adăugăm umplutura de sus și de jos egală cu înălțimea imaginii (300 pixeli).
Rezultatul de până acum
Chiar acum ne putem opri aici dacă doriți să păstrați designul galeriei fără spații între imagini. Iată cum arată rezultatul până acum. Observați cum se deplasează imaginile pe verticală și orizontală exact un bloc / cadru.
Adăugarea de spațiu între imagini
Deoarece setăm lățimea jgheabului la 1, nu mai avem o marjă între coloane sau imagini. Pentru a recrea spații similare, putem adăuga umplere la fiecare cadru.
Acest lucru ne va permite să creăm spațiul de care avem nevoie fără a compromite funcționalitatea efectelor de derulare. Acest lucru este posibil deoarece adăugarea căptușelii la imagine nu va crește lățimea sau înălțimea containerului de imagine. De asemenea, puteți avea un efect similar folosind și chenarele.
Imagine 1 Căptușire
Deschideți setările pentru imaginea 1 și actualizați următoarele:
- Padding: 10 pixeli în partea de sus, 10 pixeli în partea de jos, 10 pixeli în stânga, 10 pixeli în dreapta
Extindeți umplerea la toate imaginile
Înainte de salvare, faceți clic dreapta pe opțiunea de umplere și selectați „Extindeți umplerea”. În fereastra pop-up de extindere a stilurilor, faceți clic pe butonul de extindere pentru a extinde această umplere la toate imaginile de pe pagină.
Rezultat final
Iată rezultatul tuturor lucrărilor pe care le-am făcut până acum.
Ultimele gânduri
Efectul derulant al puzzle-ului alunecat prezentat în acest articol nu ne oferă decât un design unic pentru o galerie de imagini. De asemenea, subliniază că deplasările orizontale și verticale pot fi utilizate pentru efecte de defilare mai precise.
Simțiți-vă liber să explorați diferite variante ale acestui aspect schimbând compensările și amestecând locațiile imaginilor.
De asemenea, puteți modifica numărul de coloane atâta timp cât înțelegeți cum se va schimba dimensiunea coloanei / imaginii și apoi cum să actualizați compensările efectului de derulare cu valoarea corespunzătoare.
Câteva resurse recomandate
Probabil le vei găsi pe acestea Resurse interesante pentru că vă vor permite și să creați galerii foto pe dvs WordPress blog.
- 10 pluginuri pentru a crea galerii foto pe WordPress
- Cum se creează o galerie foto cu pluginul Envira
- Pluginurile 5 WordPress pentru a crea galerii foto
- Cum se folosește modulul de galerie de imagini pe Divi
