Share
Hva du skal skapeGoogles nye designinnsats er stor og rettferdiggjør en betydelig samtale. Men i stedet for å snakke om teorien om materialdesign og konsekvensene av Googles nyeste innsats, skal vi fokusere på en interessant teknikk som Google har ansatt på deres design destinasjonsside.
Når brukeren klikker på en av blokkene, utvides en SVG-sirkel fra punktet til brukerens klikk for å fylle det meste av boksen. Google henviser til dette som berøringsrippelen. Vi skal gjenskape denne effekten ved å bruke noen få linjer med jQuery, noen enkle HTML og CSS.
La oss komme i gang!
Før vi starter, må vi sette opp et grunnrutenett. Vi skal bygge gridelementene uten å bruke rammeverk, men denne teknikken vil fungere med et rammeverk helt greit.
Kolonnen klasser kartet til brøker, slik at "col-1-3" betyr 1/3 bredden av det inneholdende elementet.
Deretter skal vi sette opp våre kolonneklasser. Vi bruker MINDRE, noe som gjør at vi kan neste regler og bruke &operatør. Vi kommer ikke inn i detaljene til MINDRE, men for denne tutorials skyld, forklarer vi hvordan & operatør arbeider. Men først, her er det mindre for kolonnene.
.col posisjon: relativ; skjerm: blokk; flyte: venstre; margin: 1,25%; bakgrunnsfarge: # 444; farge: #fff; polstring: 100px; boks-størrelse: border-box; & .orange bakgrunnsfarge: # EF8130; & .blå bakgrunnsfarge: # 00ADE2; & .gray bakgrunnsfarge: # 444; & .green bakgrunnsfarge: # 76CE51; & -1- & 2 bredde: 47,5%; Og 3 bredde: 30.8333%; Og 4 bredde: 22,5%;
Legg merke til & regler. De & operatør legger til strengen som følger den med det overordnede elementet. Med andre ord, dette mindre:
.kol & -1 & -3 farge: #fff;
Ville resultere i dette CSS:
.col-1-3 farge: #fff;
Og dette mindre:
& .col & .orange bakgrunnsfarge: # EF8130;
Ville resultere i dette CSS:
.col.orange bakgrunnsfarge: # EF8130;
Hvis du vil lære mer om MINDRE, ta en titt på disse veiledningene her på Tuts +:
Deretter skal vi planlegge hvordan klikket vil fungere, og hvordan SVG vil bli plassert i hver av boksene.
Når brukeren klikker på en av boksene, beregner vi forskyvningen av museposisjonen fra hjørnet av boksen. Vi bruker da disse koordinatene til å plassere sirkelen. Vi vil også posisjonere SVG-elementet helt inn i boksene, og boksene selv vil bli plassert i forhold. Vi bruker SVGs innfødte
Først, la oss sette opp CSS for SVG-elementene.
svg posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; sirkel fyll: rgba (255,255,255,0,1);
Fyllingen benytter RGBa, som faktisk fyller sirkelelementet med hvitt ved 10%.
Først vil vi sette opp en klikklytter på .col elementer, og ta musens posisjon i forhold til dokumentet (dette ignorerer rulleposisjonen).
Stillingen er i forhold til selve esken; Det øverste venstre hjørnet av boksen hentes med $ (Denne) .offset ().
Accentsconagua
$ (". col") på ("klikk", funksjon (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (dette) .offset (). clickX = x - $ (this) .offset (). left; var box = this; // ...);Merk: Vi bruker jQuery for dette eksempelet.
Deretter skal vi konvertere clickX og Clicky variabler til heltall, da de vises som flyter i noen nettlesere. Dette sørger for at vi unngår eventuelle gjengivelsesproblemer som skyldes subpixelaliasering. Vær imidlertid oppmerksom på at dette ikke nødvendigvis vil være nødvendig for effekten av arbeidet.
var setX = parseInt (clickX); var setY = parseInt (clickY);
Deretter fjerner vi eksisterende SVG-elementer fra vår klikkte boks. Hvis du planlegger å legge til en SVG i innholdet i boksen, vær sikker på at du bruker noe som jQuery's.ikke() i kombinasjon med en klasse for å unngå å fjerne innholdet ditt.
. $ (Dette) .Finn ( "svg") fjern ();
Deretter legger vi til vårt SVG, som vi lager ved å sende tekst til jQuery-funksjonen.
$ (Denne) .append ('');De setX og Sety plasser senterets sirkel på det punktet vi klikket på tidligere.
Deretter animerer vi r eiendom (som setter radius) ved hjelp av jQuery's animere funksjon. Animasjonsfunksjonen støtter ikke animerende egenskaper, så vi bruker skritt alternativ, som kalles etter hvert trinn av selve animasjonen.
var c = $ (boks) .find ("sirkel"); c.animate ("r": $ (boks) .outerWidth (), easing: "easeOutQuad", varighet: 400, trinn: funksjon (val) c.attr ("r", val); );Husk at eske er tidligere definert som boksen som ble klikket. Vi benytter også jquery.easing, som gjør det mulig for oss å definere "easeOutQuad" for å lette eiendommen.
Den endelige JavaScript vil se slik ut:
$ (". col") på ("klikk", funksjon (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (dette) .offset (). clickX = x - $ (dette) .offset (). venstre; var boks = dette; var setX = parseInt (clickX); var setY = parseInt (klikkY); $ (dette) .find ("svg"). ); $ (dette) .append (''); var c = $ (boks) .find ("sirkel"); c.animate ("r": $ (boks) .outerWidth (), easing: "easeOutQuad", varighet: 400, trinn: funksjon (val) c.attr ("r", val); ); );Denne enkle effekten kan brukes på en rekke måter utover vårt eksempel. Tenk deg for eksempel å identifisere hvor i et bilde en person klikket, og lage en popover for å kommentere den delen av bildet, og deretter lagre koordinatene. Hvilke bruksområder kan du finne for denne effekten?
