Cum se adaugă un efect de derulare în jos pentru a previzualiza proiectele de pagini web în Divi
Publicat: 2019-04-03Indiferent dacă este într-o pagină de portofoliu sau într-o galerie de imagini, designerii web trebuie să-și prezinte desenele pentru clienți ca o parte crucială a conducerii afacerii. Și, de multe ori, aceste exemple ale muncii lor includ imagini cu modele de pagini web întregi care pot ocupa mult spațiu. De aceea, adăugarea unui efect de derulare în jos la aceste imagini vă poate distinge portofoliul. Aceasta permite utilizatorului să vadă inițial o porțiune compactă a designului. Dar când utilizatorul trece peste imagine, imaginea se derulează pentru a dezvălui încet restul designului ca și cum ar derula o pagină web. Puteți vedea acest tip de efect utilizat pe pagina noastră proprie Divi Layout Packs.
În acest tutorial, vă voi arăta cum să utilizați Divi pentru a adăuga un efect de derulare în jos la imaginile care vor permite utilizatorilor să previzualizeze proiectele paginilor web. Acesta este un element interactiv elegant pe care cred că îl veți iubi.
Trage cu ochiul
Iată o previzualizare a efectului de deplasare în jos pe care îl vom construi împreună în acest tutorial.
Descărcați GRATUIT aspectul de derulare în sus a cursorului
Pentru a vă pune mâna pe aceste exemple derulați în jos cu designul efectului de hover, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.
V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!
Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.
Acum să trecem la tutorial, nu-i așa?
Ce trebuie să începeți
Pentru acest tutorial de caz de utilizare, vom construi designul nostru de la zero folosind Divi. De asemenea, veți avea nevoie de câteva imagini / capturi de ecran pentru a le utiliza pentru articolele din portofoliu. Aș sugera să folosiți imagini cu o lățime de cel puțin 1080px.
Crearea rândului cu trei coloane
Dacă nu ați făcut-o deja, creați o pagină nouă. Apoi acordați titlului paginii dvs. și implementați constructorul Divi pe partea frontală. Apoi creați o nouă secțiune cu un rând cu trei coloane.
Actualizați setările rândului după cum urmează:
Lățime personalizată: 100%
Împletire personalizată (desktop): 5% la stânga, 5% la dreapta
Împletire personalizată (tabletă): 25% stânga, 25% dreapta
Împletire personalizată (telefon): 15% stânga, 15% dreapta
În continuare, trebuie să adăugăm următoarele fragmente CSS personalizate la fiecare dintre elementele principale ale coloanei. Sub fila avansată, adăugați următorul CSS:
Coloana 1 Element principal CSS:
overflow: hidden; height: 400px;
Coloana 2 Element principal CSS:
overflow: hidden; height: 400px;
Coloana 3 Element principal CSS:
overflow: hidden; height: 400px;
Observați că înălțimea fiecărei coloane este de 400 px. Acest lucru va servi în cele din urmă ca înălțimea ferestrei de vizualizare a imaginii care va derula în timpul deplasării. Proprietatea „depășire: ascuns” se va asigura că porțiunea de imagine care este mutată în afara coloanei (în cursă) rămâne ascunsă. Acest lucru ar trebui să aibă mai mult sens ori de câte ori adăugăm efectul de transformare la imagine.
Crearea imaginii cu efect de derulare în jos
Acum suntem gata să începem să ne creăm imaginea cu efectul de derulare în jos. Acest lucru este surprinzător de simplu dacă înțelegeți cum funcționează efectul. Practic, tot ceea ce vom face este să adăugăm o imagine și apoi să folosim proprietatea de traducere de transformare pentru a muta imaginea în sus cu 100% în cursul deplasării. Apoi, pentru a ne asigura că imaginea se oprește în poziția corectă, trebuie să adăugăm o marjă superioară egală cu înălțimea coloanei aflate pe cursor. Acest lucru vă va asigura că imaginea nu se mai derulează în punctul exact în care este vizualizată partea de jos a imaginii.
Iată cum să o faci.
Adăugați un modul de imagine în coloana 1. Apoi adăugați următoarele opțiuni de cursor:
Marjă personalizată (hover): 400 px de sus
Transformă axa Y tradusă (trecere): -100%
Asigurați-vă că marja superioară personalizată de la cursor este egală cu înălțimea dată coloanei dvs. în CSS personalizat de mai sus.
De asemenea, valoarea axei Y a traducerii de transformare este un procent (-100%), nu pixeli, așa că va trebui să introduceți manual introducând valoarea în caseta de intrare a comenzilor de traducere a transformării.
Cum funcționează efectul Derulare în jos
Ar putea fi de ajutor dacă explic funcționalitatea acestei configurări cu câteva ilustrații vizuale. Să presupunem că imaginea pe care o utilizați are o înălțime de 700 px. Înălțimea coloanei este de numai 400 px. Aceasta înseamnă că În mod implicit (înainte de deplasare), deversarea inferioară a acelei imagini va fi ascunsă deoarece se extinde în afara coloanei.
Odată ce utilizatorul trece peste imagine, se întâmplă două lucruri.
În primul rând, proprietatea de traducere de transformare mută imaginea în sus cu o valoare a axei Y de -100%. Cu alte cuvinte, imaginea se deplasează cu 100% în sus, indiferent de înălțimea imaginii (700 px).
Apoi, imaginii i se oferă o marjă superioară de 400 px pentru a readuce imaginea în jos în fereastra coloanei, astfel încât să se așeze perfect în partea de jos.
Acest lucru se întâmplă simultan împreună cu efectul de hover transformare, astfel încât rezultatul este o derulare netedă care se termină cu o plasare perfectă.
Iată cum arată rezultatul pe exemplul live.
Reglarea duratei de tranziție și a curbei de viteză
După cum vă puteți da seama, durata tranziției este prea rapidă pentru previzualizarea imaginii în cursă. Pentru a-l încetini, puteți actualiza durata tranziției. De asemenea, puteți regla curba de viteză pentru a modifica viteza în timpul duratei.
Actualizați următoarele:
Durata tranziției: 4000 ms
Curba vitezei de tranziție: ușurință
În general, veți dori să măriți durata de tranziție pentru imaginile cu înălțime mai mare pentru a oferi utilizatorului timp pentru procesarea imaginii pe măsură ce apare efectul de derulare a cursorului.
Copiați și lipiți modulul de imagine în coloanele rămase
Acum tot ce va trebui să faceți este să copiați modulul de imagine și să-l inserați în coloana 2 și coloana 3. Apoi actualizați imaginile pentru fiecare la orice imagine nouă doriți. Asta e!
Adăugarea unui titlu deasupra fiecărei imagini utilizând un modul de text
Dacă doriți să adăugați un titlu la fiecare dintre imaginile dvs., puteți face acest lucru folosind modulul text. Cu toate acestea, va trebui să facem unele ajustări la modulul text și modulul imagine pentru a-l face să funcționeze.
Continuați și adăugați un nou modul de text deasupra imaginii din coloana 1. Veți fi mai ușor de utilizat modul de vizualizare wireframe, deoarece coloana dvs. este setată la o înălțime a coloanei.
Apoi actualizați conținutul cu un titlu h2 după cum urmează:
<h2>Homepage</h2>
Apoi actualizați setările de proiectare după cum urmează:
Culoare fundal: #ffffff
Orientare text: centru
Rubrica 2 Dimensiune text: 20 px
Titlul 2 Înălțimea liniei: 2em
Marja personalizată: 0 px de jos
Căptușeală personalizată: partea superioară de 10 px
Box Shadow: vezi captura de ecran
Aceste setări pot părea arbitrare, dar nu sunt. Aceste valori pot prezice care va fi înălțimea modulului de text, ceea ce este important să știți pentru mai târziu. De exemplu, știu că modulul text va avea o înălțime de 60 px. Să facem calculele ...
Înălțimea liniei este 2em, ceea ce reprezintă de 2 ori dimensiunea textului titlului 2 (20 px). Aceasta înseamnă că înălțimea liniei mele va fi de 40 px.
Căptușeala personalizată de sus este setată la 10 px. Și există o umplutură de fund ascunsă de 10 px care există deja pentru toate titlurile în mod implicit în Divi. Căptușeala superioară și inferioară se combină pentru o înălțime suplimentară de 20 px.
Deci ... 40 px (de înălțimea liniei) + 20 px (de umplutură) = 60 px
Acum știm înălțimea modulului de text. Desigur, puteți inspecta întotdeauna elementul folosind instrumente de dezvoltare doar pentru a vă asigura.
Marja de jos personalizată de 0 px este necesară pentru a elimina marja implicită care există sub modul (adăugată de lățimea jgheabului).
Deoarece va exista o anumită suprapunere a imaginii cu modulul de text pe hover, trebuie să ne asigurăm că modulul de text rămâne stratificat deasupra imaginii. Putem face acest lucru dând modulului text o poziție relativă și schimbând valoarea indexului z după cum urmează:
Adăugați următorul CSS personalizat la elementul principal:
position:relative;
Apoi actualizați indexul z:
Indicele Z: 3
Copiați și lipiți modulul de text
Acum că titlul textului este terminat, îl putem copia și lipi (folosind modul de vizualizare wireframe) deasupra imaginilor din coloana 2 și 3.
Apoi, tot ce trebuie să faceți este să actualizați conținutul pentru fiecare.
Actualizați valoarea marjei superioare la cursor pentru fiecare imagine pentru a se potrivi pentru înălțimea modulului de text
În prezent, fiecare dintre imaginile din coloanele 1, 2 și 3 au o marjă superioară personalizată de 400 px la plecare. Aceasta a fost setată să fie egală cu înălțimea înălțimii personalizate a coloanei. Cu toate acestea, deoarece modulul text ocupă acum o parte din spațiul coloanei (o înălțime de 60 px), trebuie să ajustăm valoarea de trecere a marginii superioare.
Pentru a face acest lucru, utilizați funcția multiselectare pentru a selecta toate cele trei imagini. Apoi actualizați setările elementului după cum urmează:
Marjă personalizată (plimbare): 340 px de sus
Acum, imaginile dvs. se vor opri perfect în partea de jos a coloanei la sfârșitul stării de plutire.
Rezultat final
Iată rezultatul final al designului.
Simțiți-vă liber să duplicați rândul și să actualizați imaginile și textul antetului, după cum este necesar pentru mai multe afișaje de portofoliu.
Iată cum arată pe tabletă și telefon.
Gânduri finale
Prezentarea proiectelor paginilor dvs. web cu un efect personalizat de derulare în jos nu numai că adaugă o interacțiune foarte interesantă, dar economisește și mult spațiu. Acest lucru vă permite să afișați o mulțime de imagini într-un aspect compact și simetric. Acest tip de funcționalitate este de obicei ceva ce am obține cu un plugin. Cu toate acestea, cu Divi, aveți un control complet asupra designului și funcționalității fără a fi nevoie să adăugați alt plugin. Sper că acest lucru vă inspiră să creați galerii de portofoliu frumoase pentru următorul dvs. proiect.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!