Recent am lucrat pe un site client și mi-a cerut să creez un astfel de efect. Acest efect este foarte frecvent utilizat în portofoliul de site-uri, unde site-ul ar trebui să prezinte componente vizuale și de informare. Există multe metode diferite. N-am mai făcut niciodată așa ceva înainte. Am început să înțeleg și am găsit mai multe metode diferite.
Prima metodă a fost folosirea pluginului jQuery. Nu exact efectul pe care îl căutam. În plus, mufa cântărește foarte mult.
O altă modalitate a fost de a pune tag-ul img în container și de a manipula imaginea utilizând CSS. Există plusuri aici: puteți seta sursa utilizând atributul srcset pentru a încărca o imagine adecvată pentru un anumit dispozitiv.
În cazul meu, am vrut să controlez efectul de zoom în întregime prin CSS, așa că am ales a doua metodă.
Funcționalitatea de bază
Pentru o performanță optimă, am decis să folosesc proprietatea transformă pentru a mări imaginea. Astfel, obținem o animație CSS cu accelerare hardware, ceea ce o face mai netedă.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
În loc de eticheta img, am luat o etichetă div și am pus-o într-un container. Acest bloc a trebuit să simuleze lucrarea etichetei img. structura:
Mai întâi, trebuie să setați dimensiunea elementului părinte. Elementele copil pot umple blocul parent folosind lățimea: 100% și înălțimea: 100%; proprietăți. De asemenea, trebuie să setați o imagine de fundal care va închide 100% din bloc.
Apoi adăugăm efectul de hovering la blocul părinte. Acest efect va afecta elementul copil. Pseudo-clasa de focus este foarte potrivită pentru accesibilitate:
Pentru asistență maximă în browsere, puteți utiliza un instrument special pentru a adăuga prefixele furnizorilor. Completând efectul de bază, puteți adăuga câteva tranziții ușoare pentru starea normală a elementului copil:
Pentru a adăuga un strat suprapus cu o anumită culoare, puteți utiliza pseudo-elemente de tipul. înainte de:
Dacă îndreptați mouse-ul către blocul părinte, trebuie să apară un strat colorat deasupra elementului copil! În cele din urmă, vom examina modul de adăugare a textului în stratul suprapus. Puteți adăuga un element nou la blocul nostru de copii:
Eticheta Span poate fi setată la câteva stiluri:
Textul apare numai când treceți cursorul pe blocul .parent:
Suport pentru dispozitive mobile
În cazul în care containerele sunt realizate sub formă de link-uri, iar starea cursorului nu conține informații utile, puteți lăsa totul la fel.
Revizuire: Dylan Winn-Brown
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
