Share
Mulțumită flexboxului, în zilele noastre putem construi unele aspecte foarte atractive și moderne cu ușurință. În acest tutorial vom analiza o interfață folosită recent pentru Google Parks și vom vedea cum flexbox ne poate ajuta să îmbunătățim acest lucru.
Ca întotdeauna, înainte de a merge mai departe, să ne uităm la ceea ce vom construi (este posibil să trebuiască să verificați versiunea mai mare, deoarece efectul deplin intră în porturile de vizualizare mai mari de 800 de pixeli):
Asigurați-vă că plasați cursorul peste link-uri pentru a declanșa efectele corespunzătoare.
Mai întâi, să examinăm marcajul pe care îl vom folosi pentru a construi acest aspect. Definim a div element cu cinci link-uri în interiorul acestuia (puteți utiliza oricare dintre elementele pe care le considerați potrivite). Fiecare dintre legăturile noastre conține div cu clasa de acoperire. Mai jos puteți vedea scheletul codului nostru:
Cu marcarea pregătită, începem să definim câteva stiluri CSS inițiale, în special:
Accentsconagua
div ca un container flexibil și setați înălțimea sa egală cu înălțimea portului de vizualizare cu înălțime: 100vh.flex: 1. În plus, toate legăturile noastre vor avea o imagine de fundal (provenită de la unsplash.com) care acoperă înălțimea ferestrei de vizualizare. Ca rezervă (în cazul în care o imagine nu este disponibilă), specificăm și o culoare unică de fundal pentru fiecare.Atunci când plasăm cursorul peste o legătură, dimensiunea acestuia devine de trei ori mai mare decât dimensiunea celorlalte linkuri. Facem acest lucru prin schimbarea valorii contracta proprietatea legăturii țintă. Din fericire, această proprietate aparține proprietăților CSS animate, astfel încât să putem genera un efect de tranziție lină (cel puțin în cele mai recente browsere).
Iată o parte din codul CSS care demonstrează ceea ce am descris mai sus:
.flex-wrapper afișaj: flex; înălțime: 100vh; .flex-wrapper o poziție: relativă; flex: 1; dimensiunea fundalului: capac; fundal-poziție: centru; background-repeat: nu-repeta; tranziție: flex .4s; .flex-wrapper .one imagine-imagine: url (IMAGE_PATH); fundal-culoare: roșu; .flex-wrapper a: hover flex: 3;
Până acum, dacă examinăm demo-ul într-un browser care acceptă flexbox, vom vedea acest rezultat:
Următorul pas este să atribuiți câteva stiluri la suprapunere. Iată ce vom face:
.suprapunere-interior element) vertical și orizontal.Iată stilurile CSS asociate:
.flex-wrapper. suprapunere display: flex; aliniere: centru; justify-content: centru; umplutură: 0 10px; poziția: absolută; top: 0; dreapta: 0; fund: 0; stânga: 0; tranziție: culoarea de fundal .4s; .flex-wrapper a: mutați .overlay background-color: rgba (0, 0, 0, .5);
Acum, e timpul să stilisem părțile interioare ale suprapunerii noastre. În mod implicit, acestea sunt ascunse și ar trebui să apară numai atunci când plasăm cursorul peste link-ul părinte corespunzător. Dar nu imediat, le vom dezvălui după o mică întârziere. Această întârziere este importantă; dacă nu o definim în mod specific, efectul de tranziție va părea puțin urât. Îndepărtați-l și testați demo-ul pentru a înțelege ce vreau să spun.
Deci doar pentru a recapa, mai intai link-ul devine mai mare, atunci elementele suprapuse devin vizibile. De asemenea, folosim translate3d () pentru a crea o serie de efecte. Nu în ultimul rând, folosim transform-stil: conserve-3d hack (sau unul similar) pentru a preveni posibilele efecte de pâlpâire pe diferite browsere.
Și aici sunt stilurile CSS asociate:
.flex-wrapper. superior-interior * vizibilitate: ascuns; opacitate: 0; stilul transformat: păstrați-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: traducere3d (0, 60px, 0); .flex-wrapper a: hover. superior-interior * opacitate: 1; vizibilitate: vizibil; transforma: nici unul; tranziție: toate .3s .3s;
Să vedem ce ne-a dat.
Pagina pare grozavă pe ecrane mari, dar poate și pe ecrane mici sau chiar pe ecrane, va trebui să facem câteva ajustări. De exemplu, aici sunt câteva lucruri pe care le putem face:
direcția flex: coloană la el. În acest fel elementele flexibile vor curge de sus în jos.Prima noastră interogare de tip desktop-desktop arată după cum urmează (am folosit doar 800px pentru că se potrivește demo-urilor încorporate în acest post - poți alege ce simți cel mai bine):
Ecranul @media și (max-width: 800px) .flex-wrapper direcția flex: coloană; .flex-wrapper a: hover flex: 1; .flex-wrapper a: hover .overlay fundal-culoare: transparent; .flex-wrapper.overlay h2, .flex-wrapper.overlay p opacitate: 1; vizibilitate: vizibil; transforma: nici unul;
Iată aspectul final al navigației noastre:
Demo-ul funcționează în toate browserele recente care suportă flexbox.
În unele browsere este posibil să observați că animația contracta proprietatea nu este la fel de buna ca ar trebui sa fie, sau poate ca nu functioneaza deloc. De exemplu, IE11 nu animă această proprietate, în timp ce Edge face. Acest lucru este destul de rezonabil, având în vedere faptul că flexbox-ul este un nou mod de aspect, care încă câștigă tracțiune.
În acest tutorial, am îmbunătățit cunoștințele flexbox, învățând cum să construim un aspect elegant de navigație. Sperăm că v-ați bucurat de ceea ce am construit aici și am inspirat câteva proiecte viitoare!
Dacă construiți un aspect similar, nu uitați să ne arătați abordarea (soluție pură CSS sau bazată pe JavaScript) pe care ați utilizat-o.
Înainte de închidere, aș dori să vă împărtășesc câteva site-uri care utilizează un aspect similar cu ceea ce am creat:
