Share
Vad du ska skapaGoogles nya designinsatser är stora och motiverar en betydande mängd samtal. Men i stället för att prata om teorin om materialdesign och konsekvenserna av Googles senaste ansträngningar kommer vi att fokusera på en intressant teknik som Google har använt på deras design landningssida.
När användaren klickar på ett av blocken expanderar en SVG-cirkel från punkten på användarens klick för att fylla det mesta av rutan. Google hänvisar till detta som touch ripple. Vi kommer att återskapa denna effekt med några rader av jQuery, några enkla HTML och CSS.
Låt oss börja!
Innan vi börjar måste vi skapa ett grundläggande rutnät. Vi ska bygga gallerelementen utan att använda ramar, men den här tekniken skulle fungera med en ram som är perfekt.
Kolumnen klassificerar kartor till fraktioner, så att "col-1-3" betyder 1/3 bredden av det innehållande elementet.
Därefter kommer vi att konfigurera våra kolumnklasser. Vi använder mindre, vilket gör det möjligt för oss att fastställa regler och utnyttja &operatör. Vi kommer inte att komma in i specifika mindre, men för denna handledning skull förklarar vi hur & operatörsverk. Men först, här är det mindre för kolumnerna.
.kol position: relativ; display: block; flyta till vänster; marginal: 1,25%; bakgrundsfärg: # 444; färg: #fff; vaddering: 100px; box-dimensionering: gränsvärde; & .orange bakgrundsfärg: # EF8130; & .blå bakgrundsfärg: # 00ADE2; & .gray bakgrundsfärg: # 444; & .green bakgrundsfärg: # 76CE51; & -1- & 2 bredd: 47,5%; & 3 bredd: 30.8333%; & 4 bredd: 22,5%;
Lägg märke till & regler. De & operatören lägger till strängen som följer den till moderen. Med andra ord, detta mindre:
.kol & -1 & -3 färg: #fff;
Skulle resultera i denna CSS:
.col-1-3 färg: #fff;
Och detta mindre:
& .col & .orange bakgrundsfärg: # EF8130;
Skulle resultera i denna CSS:
.col.orange bakgrundsfärg: # EF8130;
Om du vill lära dig mer om MINDER, ta en titt på dessa handledning här på Tuts +:
Låt oss sedan planera hur klicket ska fungera, och hur SVG kommer att placeras inuti varje lådor.
När användaren klickar på någon av rutorna kommer vi att beräkna förskjutningen av muspositionen från hörnet av den rutan. Vi använder sedan dessa koordinater för att placera cirkeln. Vi placerar också helt SVG-elementet inuti lådorna, och lådorna själva kommer att placeras i förhållande. Vi använder SVGs infödda
Låt oss först skapa CSS för SVG-elementen.
svg position: absolute; topp: 0; vänster: 0; bredd: 100%; höjd: 100%; cirkel fyll: rgba (255,255,255,0,1);
Fyllningen använder RGBa, som i själva verket fyller cirkelelementet med vit vid 10%.
Först kommer vi att skapa en klicklarmare på .col element och grip musens position i förhållande till dokumentet (detta ignorerar rullningsläget).
Positionen är i förhållande till själva lådan; Det övre vänstra hörnet av lådan hämtas med $ (This) .offset ().
Accentsconagua
$ (". col"). På ("klicka", funktionen (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (detta) .offset (). clickX = x - $ (this) .offset (). left; var box = this; // ...);Notera: vi använder jQuery för detta exempel.
Därefter ska vi konvertera clickX och clicky variabler till heltal, eftersom de visas som flottor i vissa webbläsare. Detta gör att vi undviker eventuella återgivningsproblem som uppstår genom subpixelaliasering. Observera dock att det inte nödvändigtvis skulle behövas för att arbetet ska fungera.
var setX = parseInt (clickX); var setY = parseInt (klicka Y);
Därefter tar vi bort eventuella befintliga SVG-element från vår klickade ruta. Om du planerar att lägga till en SVG i innehållet i rutan, var säker på att du använder något som jQuery s.inte() i kombination med en klass för att undvika att ta bort ditt innehåll.
. $ (This) .Hitta ( "SVG") ta bort ();
Därefter lägger vi till vårt SVG, som vi skapar genom att skicka text till jQuery-funktionen.
$ (This) .append (');De sattX och setY Placera mittpunkten på cirkeln vid det klick som vi härledde tidigare.
Nästa, vi animerar r egendom (som sätter radie) med jQuery s animera fungera. Animate-funktionen stöder inte animerande egenskaper, så vi använder steg alternativ som kallas efter varje steg i animationen själv.
var c = $ (box) .find ("cirkel"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", varaktighet: 400, steg: funktion (val) c.attr ("r", val); );Kom ihåg det låda definieras tidigare som rutan som klickades. Vi utnyttjar också jquery.easing, vilket gör det möjligt för oss att definiera "easeOutQuad" för den lätta egenskapen.
Den sista JavaScript kommer att se ut så här:
$ (". col"). På ("klicka", funktionen (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (detta) .offset (). clickX = x - $ (this) .offset (). left; var box = this; var setX = parseInt (clickX); var setY = parseInt (clickY); $ (detta) .find ("svg"). ); $ (this) .append (''); var c = $ (box) .find ("cirkel"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", varaktighet: 400, steg: funktion (val) c.attr ("r", val); ); );Denna enkla effekt kan användas på ett antal sätt bortom vårt exempel. Tänk dig att identifiera var i en bild en person klickade och skapa en popover för att kommentera den delen av bilden och spara sedan koordinaterna. Vilka användningsområden kan du hitta för denna effekt?
