Cum se adaugă efectele Ken Burns Hover la imagini, module și rânduri în Divi

Efectul Ken Burns există de ceva vreme. Efectul a fost renumit de documentarul american Ken Burns, întrucât a folosit o combinație de tehnici de panoramare și zoom pentru a da viață imaginilor în filmele sale. În designul web, Efectul Ken Burns s-a dovedit a fi o tehnică de design populară pentru a da viață imaginilor de fundal.

Efectul Ken Burns poate fi, de asemenea, utilizat ca efect de plimbare pentru imagini. Cu siguranță ați văzut acest lucru folosit înainte. Într-un efort de a aduce imagini la viață, designerii web adaugă efecte de plutire la imagini care le determină să meargă, să se miște și să se rotească.

Odată cu lansarea efectelor Transform în Divi Builder, nu a fost niciodată mai ușor să aduceți imaginilor dvs. efecte de fotografiere ken burns. Aceste opțiuni de transformare vă permit să scalați (măriți), să mutați (sau să deplasați) și să rotiți o imagine după cum doriți. Și, din moment ce puteți aplica aceste transformări la starea de plutire a imaginii, posibilitățile de proiectare sunt aproape nelimitate.

În acest tutorial, vă voi arăta cât de ușor este să creați efecte de hover cu arzător complet unice pe imagini și rânduri folosind Divi Builder.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra efectului de hover ken burns care poate fi realizat cu ușurință cu opțiunile de transformare ale lui Divi.

Conceptul de bază explicat

Conceptul de bază pentru crearea efectului de hover Ken Burns implică utilizarea noilor opțiuni de transformare ale Divi pentru a scala, poziționa și roti imaginea atunci când treceți peste acea imagine. Puteți crește proprietatea de transformare a scării cu un anumit procent pentru a face imaginea să crească la plimbare. Puteți utiliza proprietatea de transformare pentru a muta imaginea de-a lungul axelor x și y. Și puteți roti imaginea utilizând proprietatea de rotire a transformării prin setarea unei valori de grad specifice (în acest caz, valoarea gradului de rotație pe axa x). În cele din urmă, puteți controla durata de tranziție (viteza) și curba de viteză pentru a controla viteza de curgere a efectului de ardere a ken-ului. Cele trei proprietăți de transformare și proprietăți de tranziție lucrează împreună pentru a crea un efect de hover ken ken care dă viață fotografiilor.

Puteți regla cu ușurință proprietățile de transformare și proprietățile de tranziție utilizând setările încorporate oferite de Divi. Cu toate acestea, cheia pentru ca acest efect să funcționeze implică o linie simplă de css (overflow: ascuns) care trebuie aplicată coloanei care conține imaginea dvs. Deoarece veți fi scalat, mișcat și rotit imaginea, doriți ca deversarea imaginii să fie ascunsă în afara coloanei care o conține.

Odată ce aveți ideea de bază în jos și funcționalitatea, este remarcabil cât de ușor este să poziționați imaginea exact cum doriți, folosind opțiunile de transformare ale lui Divi.

Descărcați gratuit exemplele de efecte Ken Burns Hover

Pentru a pune mâna pe exemplele gratuite de efecte Ken Burns 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.

După ce ați descărcat fișierul zip, dezarhivați folderul. Apoi, importați aspectul .json utilizând caracteristica Divi Builder Portability. Sau puteți trage pur și simplu fișierul în Divi Builder utilizând funcționalitatea Divi’s Drag and Drop. Asta e!

Descărcați fișierele

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.

DESCARCA

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!

Noțiuni introductive despre o pagină nouă

Primul lucru pe care trebuie să-l faci este să creezi o pagină nouă. Apoi acordați-vă paginii un titlu și implementați Divi Builder pe partea frontală. Apoi alegeți opțiunea „Build from Scratch”.

Adăugarea efectului Ken Burns la o imagine într-un rând cu o coloană

Pentru acest prim exemplu de bază, vă voi arăta cum să adăugați efectul Ken Hover Hover la o singură imagine într-un rând cu o coloană. Voi folosi scala, traducerea și rotirea opțiunilor de transformare pentru a realiza acest efect.

Mai întâi, creați o nouă secțiune nouă cu un rând cu o coloană. Apoi adăugați un modul de imagine pe rând.

Ascunderea revărsării coloanei

Înainte de a începe să actualizăm setările de imagine, deschideți setările de rând și faceți clic pe fila Avansat. Apoi adăugați următorul CSS personalizat la elementul principal al coloanei:

overflow: hidden;

Acest lucru va împiedica extinderea (sau debordarea) imaginii dincolo de containerul coloanei ori de câte ori imaginea se ridică la o dimensiune mai mare în cursul cursorului. Dacă nu adăugați acest lucru, imaginea va ieși din container și va ascunde alte elemente ale paginii. Din punct de vedere tehnic, ați putea adăuga acest css la elementul principal al rândului în loc de coloană, dar ar trebui să scăpați și de orice umplutură de rând personalizată.

Salvați setările rândului.

Adăugarea imaginii

Acum putem adăuga o imagine la modulul de imagine. Deschideți setările modulului de imagine și adăugați o imagine.

Asigurați-vă că imaginea este considerabil mai mare decât coloana. Acest lucru este important pentru a împiedica imaginea să pară neclară atunci când redimensionați imaginea la o dimensiune mai mare la cursor. Dacă utilizați setările implicite ale unui rând cu o coloană, lățimea maximă a coloanei va fi 1080px. Deci, folosesc o imagine care are aproximativ 1500 px în lățime și 900 px în înălțime.

Important: De regulă, cu cât imaginea este mai mare, cu atât mai mult spațiu va trebui să scalați, să mutați și să rotiți imaginea fără a pierde calitatea imaginii.

Adăugarea efectelor Transform Hover

Acum, că avem imaginea la locul lor, este timpul să folosim acele opțiuni de transformare pentru a crea efectul de cursor Ken Burns. Treceți la fila de proiectare pentru a deschide opțiunile Transformare. Activați efectele hover și selectați fila hover. Acum, orice personalizare a efectului de transformare se va aplica numai stării de deplasare a modulului de imagine. Apoi, în fila Transform Scale, actualizați următoarele:

Axa X a scalei de transformare (plimbare): 136%
Axa y a scalei de transformare (plimbare): 136%

Apoi faceți clic pe fila Transformare traducere și actualizați următoarele:

Transformă axa x tradusă (plasați cu mouse-ul): 3%
Transformă axa y (Traducere): 9%

Aceasta mută imaginea spre stânga cu 3% și în jos cu 9%. Pentru această imagine specifică, căutam un efect care să mărească și să aducă cuplul în centrul ferestrei coloanei.

În mod implicit, valorile lungimii traducerii vor fi în pixeli (nu în procente). Puteți folosi pixeli pentru a mișca imaginea, dar consider că utilizarea procentelor face ca poziționarea să fie mai receptivă.

Apoi faceți clic pe fila Transformare rotire și actualizați următoarele:

Transformare Rotire axa x (hover): 6 grade

Actualizați opțiunile de tranziție

În cele din urmă, trebuie să actualizăm durata tranziției (cât durează să se efectueze efectul de hover transformare) și curba de viteză (funcția de sincronizare care permite tranziției să schimbe viteza pe durata sa). Pentru acest exemplu, vreau ca tranziția să dureze mai mult pentru un efect mai dramatic (și clasic) Ken Burns asupra hover-ului. Pentru aceasta, accesați fila avansată și actualizați opțiunile de tranziție după cum urmează:

Durata tranziției: 2000ms (sau 2 secunde)
Curba vitezei de tranziție: liniară (aceasta asigură că viteza tranziției nu se schimbă în durată)

Rezultat final

Acum să verificăm rezultatul final. Nu vă lăsați induși în eroare de gif-ul gif-ului de mai jos. Tranziția este cu adevărat lină pe un site live.

Adăugarea efectului Ken Burns Hover la mai multe imagini într-un rând cu trei coloane

Dacă doriți să adăugați efectul hover ken ken la imaginile din mai multe coloane, se aplică același proces. Principalul lucru pe care trebuie să-l faceți este să vă asigurați și să adăugați fragmentul css „overflow: hidden” la fiecare dintre coloanele care conțin imaginea dvs.

Folosind exemplul anterior de mai sus, schimbați structura coloanei rândului într-un aspect cu trei coloane.

Apoi, actualizați setările de rând cu fragmente CSS personalizate care vor ascunde depășirea fiecărei coloane.

Coloana 1 Element principal CSS:

overflow:hidden;

Coloana 2 Element principal CSS:

overflow:hidden;

Coloana 3 Element principal CSS:

overflow:hidden;

Apoi copiați modulul de imagine și lipiți-l în coloana 2 și coloana 3.

Asta e. Iată rezultatul final.

Întrucât acest design este mai tipic pentru un aspect al grilei de galerie, probabil că veți dori să accelerați puțin durata tranziției pentru a accentua animația cu mouse-ul. Puteți face acest lucru cu ușurință utilizând funcția multiselect a Divi. Țineți apăsat ctrl sau cmd și selectați toate modulele de imagine. Apoi faceți clic pe pictograma roată setări pe una dintre imagini pentru a deschide modalitatea Setări element.

Acum toate actualizările pe care le faceți în setările elementului vor fi aplicate tuturor imaginilor simultan. Actualizați opțiunile de tranziție din setările elementului după cum urmează:

Durata tranziției: 500 ms

Iată noua durată de tranziție în vigoare.

Adăugarea efectului Ken Burns Hover la orice modul cu imagine de fundal

Efectul hover Ken Burns poate fi utilizat și pentru alte module decât modulul de imagine. Acest lucru funcționează bine dacă doriți să transformați text sau pictograme împreună cu imaginea de fundal a unui modul.

Iată cum să adăugați efectul Ken Burns la un modul de text.

Mai întâi creați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul text la rând.

Actualizați modulul text cu următorul conținut:

<h1>We're Engaged!</h1>

Apoi adăugați o imagine de fundal la modul. Nu uitați să adăugați o imagine suficient de mare pentru a lăsa spațiu pentru redimensionare și mișcare a imaginii.

Și apoi actualizați opțiunile de proiectare a titlului după cum urmează:

Font de titlu: Prata
Dimensiune text antet: 6vw
Căptușeală personalizată: 10vw sus, 10vw jos, 3vw stânga

Durata tranziției: 5000 ms

Acum adăugați următoarele setări de transformare la modulul text.

Axa X a scalei de transformare (plimbare): 118%
Axa y a scalei de transformare (plimbare): 118%

Transformă axa x tradusă (plasați cu mouse-ul): 6%
Transformă axa y tradusă (plasați cu mouse-ul): 6%

Acum, actualizați setările rândului cu următorul CSS personalizat pentru coloană.

CSS Element principal al coloanei:

overflow:hidden;

Acum verificați rezultatul.

Observați modul în care textul și imaginea de fundal se vor transforma împreună în cursă.

Combinând efectul Ken Burns Hover cu efecte Hover suplimentare

De asemenea, puteți combina efectul Ken Burns Hover care se aplică unui modul cu efecte suplimentare pentru o mai mare creativitate.

Combinând efectul Ken Burns Hover cu efecte de filtru

În cazul în care ați uitat de ele, efectele de filtrare sunt o modalitate excelentă de a adăuga un stil creativ modulelor dvs., în special pe hover. Și puteți combina aceste efecte de filtru cu efect de transformare pentru unele tranziții de plutire destul de unice.

Pentru a vă arăta, să folosim exemplul de mai sus care a adăugat efectul ken burns la un modul text. Întrucât modulul text are deja efectul de transformare în poziție, să adăugăm un efect de filtrare suplimentar pentru a schimba imaginea de la alb-negru la culoare.

Deschideți setările modulului text și actualizați următoarea opțiune de filtrare:

Saturație (implicit): 0%
Saturație (plimbare): 100%

Această tranziție va seta modulul text la 0% saturație în mod implicit, care va elimina culoarea făcându-l alb-negru. Setarea înapoi la 100% la deplasare va adăuga culoarea originală a imaginii înapoi.

Iată efectul final al efectului de filtrare combinat cu efectul ken burns hover.

Combinarea efectului Ken Burns Hover cu efectele Transform Row

Pentru acest exemplu, vă voi arăta cum să combinați efectul Ken Hover Hover cu un efect de transformare suplimentar adăugat la rând. Ideea este de a utiliza efecte de transformare pentru a scala și roti rândul la starea implicită și apoi a restabili designul original la plimbare.

NOTĂ: Această tehnică va funcționa foarte bine doar pentru un rând cu o coloană cu un singur modul. Acest lucru se datorează faptului că vizitatorul va trebui să treacă peste modul și rând simultan. Prin urmare, modulul trebuie să preia toată înălțimea și lățimea rândului. Module suplimentare sau spațierea vor rupe starea de plutire și vor cauza probleme.

Pentru a face acest lucru, vom rămâne cu designul actual al modulului de text, care combină deja efectul ken burns hover cu un efect de filtru suplimentar. Deci, acesta este de fapt un efect triplu de plutire!

Deschideți setările rândului care conține modulul text. Apoi actualizați următoarele:

Împletire personalizată: 0 px sus, 0 px jos, 0 px stânga, 0 px dreapta

Aceasta este pentru a vă asigura că nu există spațiu suplimentar între modulul text și rând.

În continuare, vom adăuga o umbră de casetă la rând, după cum urmează:

Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 36 px
Culoare umbră: rgba (0,0,0,0,17)

Acum adăugați următoarele efecte de transformare:

Axa x a scalei de transformare (implicit): 70%
Axa X a scalei de transformare (plimbare): 100%
Axa y a scalei de transformare (implicit): 70%
Axa Y a scalei de transformare (plimbare): 100%

Transformare Rotire axa y (implicit): 19 grade
Transformare Rotire axa y (deplasare): 0 grade
Transformare Rotire axa z (implicit): 23 grade
Transformare Rotire axa z (hover): 0deg

Acum, să verificăm rezultatul final.

Adăugarea efectului Ken Burns Hover la un întreg rând de conținut

Doar în cazul în care vă întrebați, efectul hover Ken Burns poate fi folosit și pentru a da viață unui întreg rând de conținut pe hover. Acest lucru nu va fi foarte practic pentru rândurile cu mult conținut, deoarece va fi o modalitate de a deruta sau distrage atenția vizitatorilor. Dar pentru lucruri precum anteturile, aceasta poate fi o tehnică de proiectare utilă. Trucul este să adăugați fragmentul CSS personalizat „overflow: hidden” la secțiune. Apoi, puteți adăuga efectele de transformare pe rând.

Gânduri finale

Deși efectul Ken Burns a existat de ceva timp, s-ar putea să-l găsiți util pentru crearea unor efecte de plutire destul de unice pentru imaginile și modulele dvs. din Divi. Trucul este să știi cum să folosești opțiunile Divi Transform care sunt surprinzător de intuitive. Aceste exemple date în acest tutorial au fost menite să introducă conceptul și, sperăm, să ofere puțină inspirație pentru propria utilizare. Când vă gândiți la toate modurile în care combinați opțiunile de transformare cu toate celelalte opțiuni de stil disponibile în Divi, încep să apară tone de idei.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!