Share
Ce veți creaNoile eforturi de design ale Google sunt uriașe și justifică o conversație semnificativă. Dar, în loc să vorbim despre teoria materialului de design și implicațiile celor mai noi eforturi ale Google, ne vom concentra pe o tehnică interesantă pe care Google a angajat-o pe pagina de destinație a designului.
Când utilizatorul face clic pe unul dintre blocuri, un cerc SVG se extinde din punctul de clic al utilizatorului pentru a umple cea mai mare parte a casetei. Google se referă la acest lucru ca o lovitură de atingere. Vom recrea acest efect utilizând câteva linii de jQuery, unele simple HTML și CSS.
Să începem!
Înainte de a începe, trebuie să înființăm o rețea de bază. Vom construi elementele rețelei fără a folosi un cadru, dar această tehnică ar funcționa cu un cadru perfect fin.
Clasele coloanelor se clasifică la fracțiuni, astfel încât "col-1-3" înseamnă 1/3 lățimea elementului care conține.
Apoi, vom configura clasele noastre de coloane. Folosim mai puțin, ceea ce ne permite să inserăm reguli și să le folosim &operator. Nu vom intra în specificul LESS, dar de dragul acestui tutorial, vom explica cum & operatorul de operare. Dar mai întâi, este mai puțin pentru coloane.
.col poziție: relativă; afișare: bloc; plutește la stânga; marja: 1,25%; fundal-culoare: # 444; culoare: #fff; padding: 100px; box-size: caseta de margine; & .orange background-color: # EF8130; & .blue background-color: # 00ADE2; & .gray background-color: # 444; &. verde background-color: # 76CE51; & -1- & 2 lățime: 47,5%; & 3 lățime: 30,8333%; & 4 lățime: 22,5%;
Observați & reguli. & operatorul adaugă șirul care îl urmează după elementul părinte. Cu alte cuvinte, această LOCĂ:
.col & -1 & -3 culoare: #fff;
Ar avea ca rezultat acest CSS:
.col-1-3 culoare: #fff;
Și aceasta mai puțin:
& .col & .orange fundal-culoare: # EF8130;
Ar avea ca rezultat acest CSS:
.col.orange background-color: # EF8130;
Dacă doriți să aflați mai multe despre LESS, aruncați o privire la aceste tutoriale aici pe Tuts +:
Apoi, să planificăm cum va funcționa clicul și cum va fi plasat SVG în interiorul fiecărei casete.
Când utilizatorul dă clic pe oricare dintre casete, vom calcula dispunerea poziției mouse-ului din colțul casetei. Apoi vom folosi aceste coordonate pentru a plasa cercul. De asemenea, vom plasa absolut elementul SVG în interiorul cutiilor, iar cutiile vor fi poziționate relativ. Vom folosi nativul SVG
Mai întâi, să stabilim CSS pentru elementele SVG.
svg position: absolute; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; cerc fill: rgba (255,255,255,0,1);
Umplerea utilizează RGBa, care în realitate umple elementul cerc cu alb la 10%.
În primul rând, vom seta un ascultător de clic pe .col elemente și apucați poziția mouse-ului în raport cu documentul (aceasta nu ia în considerare poziția de defilare).
Poziția este relativă la cutia însăși; colțul din stânga sus al casetei este preluat utilizând $ (Aceasta) .offset ().
Accentsconagua
$ (("col.") pe ("faceți clic", funcția (e) var x = e.pageX; var y = e.pageY; var clicY = y clickX = x - $ (acest) .offset () left; var box = this; // ...);Notă: folosim jQuery pentru acest exemplu.
Apoi, vom converti clickX și Clicky variabilele la numere întregi, deoarece acestea apar ca flotoare în unele browsere. Acest lucru asigură evitarea oricărei probleme de redare care rezultă din aliasarea subpixelului. Rețineți, totuși, că acest lucru nu este neapărat necesar pentru ca efectul să funcționeze.
var setX = parseInt (clicX); var setY = parseInt (clickY);
Apoi, vom elimina toate elementele SVG existente din caseta noastră cu clic. Dacă intenționați să adăugați un SVG la conținutul casetei, asigurați-vă că utilizați ceva de genul jQuery.nu() în combinație cu o clasă pentru a evita eliminarea conținutului dvs..
. $ (Aceasta) .find ( "SVG") șterge ();
Apoi, adăugăm SVG-ul nostru, pe care îl creăm prin trecerea textului în funcția jQuery.
$ (Aceasta) .append (“„);
SETX și setY poziționați centrul cercului în punctul clicului pe care l-am derivat mai devreme.
Apoi animăm r proprietate (care stabilește raza) folosind jQuery anima funcţie. Funcția de animație nu acceptă animarea proprietăților, deci folosim Etapa opțiune, care se numește după fiecare pas al animației în sine.
var c = $ (cutie) .find ("cerc"); c.animate ("r": $ (cutie) .outerWidth (), relaxare: "easeOutQuad", durata: 400, pas: function (val) c.attr ("r", val); );Sa nu uiti asta cutie este definit mai devreme ca caseta la care a fost făcut clic. De asemenea, folosim jquery.easing, ceea ce ne permite să definim "easeOutQuad" pentru proprietatea de relaxare.
Javascriptul final va arata astfel:
$ (("col.") pe ("faceți clic", funcția (e) var x = e.pageX; var y = e.pageY; var clicY = y ()). () () () () () () () () () () ); $ (acest) .append ('„); var c = $ (cutie) .find ("cerc"); c.animate ("r": $ (cutie) .outerWidth (), relaxare: "easeOutQuad", durata: 400, pas: function (val) c.attr ("r", val); ); );Acest efect simplu poate fi folosit în mai multe moduri decât exemplul nostru. Imaginați-vă, de exemplu, dacă ați identificat în cazul în care o persoană a făcut clic pe o persoană și ați creat un pop-up pentru a comenta acea porțiune a imaginii și, ulterior, pentru a salva coordonatele. Ce utilizări puteți găsi pentru acest efect?
