Share
Wat je gaat creërenDe nieuwe ontwerpinspanningen van Google zijn enorm en rechtvaardigen een aanzienlijk aantal gesprekken. Maar in plaats van te praten over de theorie van Material Design en de implicaties van de nieuwste inspanningen van Google, gaan we ons richten op een interessante techniek die Google heeft gebruikt op hun ontwerp-bestemmingspagina.
Wanneer de gebruiker op een van de blokken klikt, wordt een SVG-cirkel groter vanaf het punt waarop de gebruiker klikt om het grootste deel van het vak te vullen. Google noemt dit de aanraakrimpel. We gaan dit effect recreëren met een paar regels jQuery, wat eenvoudige HTML en CSS.
Laten we beginnen!
Voordat we beginnen, moeten we een basisraster opzetten. We gaan de grid-elementen bouwen zonder een framework te gebruiken, maar deze techniek zou perfect werken met een framework.
De kolomklassen verwijzen naar breuken, zodat "col-1-3" 1/3 van de breedte van het bevattende element betekent.
Vervolgens stellen we onze kolomklassen op. We gebruiken MINDER, waardoor we regels kunnen nesten en de &operator. We zullen niet ingaan op de details van MINDER, maar in het belang van deze tutorial zullen we uitleggen hoe het & operator werkt. Maar eerst is hier het MINDER voor de kolommen.
.col positie: relatief; weergave: blok; zweven: links; marge: 1,25%; achtergrondkleur: # 444; kleur: #fff; opvulling: 100px; box-sizing: border-box; & .orange background-colour: # EF8130; & .blauw achtergrondkleur: # 00ADE2; & .gray achtergrondkleur: # 444; & .green background-color: # 76CE51; & -1- & 2 width: 47.5%; & 3 width: 30.8333%; & 4 width: 22,5%;
Let op de & reglement. De & operator voegt de tekenreeks toe die volgt op het bovenliggende item. Met andere woorden, deze MINDER:
.col & -1 & -3 color: #fff;
Zou resulteren in deze CSS:
.col-1-3 color: #fff;
En dit MINDER:
& .col & .orange background-colour: # EF8130;
Zou resulteren in deze CSS:
.col.orange achtergrondkleur: # EF8130;
Als je meer wilt weten over MINDER, bekijk dan deze tutorials hier op Tuts +:
Laten we vervolgens plannen hoe de klik werkt en hoe de SVG in elk vak wordt geplaatst.
Wanneer de gebruiker op een van de vakken klikt, berekenen we de offset van de positie van de muis vanuit de hoek van dat vak. We gebruiken deze coördinaten vervolgens om de cirkel te plaatsen. We zullen ook absoluut het SVG-element in de vakken plaatsen, en de vakken zelf zullen relatief worden gepositioneerd. We gebruiken de native van SVG
Laten we eerst de CSS voor de SVG-elementen instellen.
svg positie: absoluut; boven: 0; links: 0; breedte: 100%; hoogte: 100%; cirkel vul: rgba (255,255,255,0,1);
De vulling maakt gebruik van RGBa, wat in feite het cirkelelement met wit vult met 10%.
Eerst zullen we een klik luisteraar instellen op de .col elementen, en pak de positie van de muis ten opzichte van het document (dit negeert de schuifpositie).
De positie is relatief ten opzichte van de doos zelf; de linkerbovenhoek van het vak wordt opgehaald met $ (This) .offset ().
Accentsconagua
$ (".col"). on ("klik", functie (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = this; // ...);Notitie: we gebruiken jQuery voor dit voorbeeld.
Vervolgens zullen we het Clickx en Clicky variabelen voor gehele getallen, omdat ze in sommige browsers voorkomen als dobbers. Dit zorgt ervoor dat we renderingproblemen voorkomen die het gevolg zijn van subpixel aliasing. Merk echter op dat dit niet noodzakelijkerwijs nodig is om het effect te laten werken.
var setX = parseInt (clickX); var setY = parseInt (clickY);
Vervolgens verwijderen we alle bestaande SVG-elementen uit onze geklikte box. Als u van plan bent een SVG toe te voegen aan de inhoud van de box, moet u er zeker van zijn dat u zoiets als jQuery's gebruikt.niet() in combinatie met een klasse om te voorkomen dat je je inhoud verwijdert.
. $ (This) .Vind ( "svg") Verwijderen ();
Vervolgens voegen we onze SVG toe, die we maken door tekst door te geven aan de jQuery-functie.
$ (This) .append ('');De actief isX en Seti plaats het midden van de cirkel op het punt van de klik dat we eerder hebben afgeleid.
Vervolgens animeren we het r eigenschap (waarmee de straal wordt ingesteld) met behulp van jQuery's bezielen functie. De animatiefunctie ondersteunt geen animatie-eigenschappen, dus gebruiken we de stap optie, die na elke stap van de animatie zelf wordt genoemd.
var c = $ (box) .find ("cirkel"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", duur: 400, stap: function (val) c.attr ("r", val); );Onthoudt dat doos is eerder gedefinieerd als het vak waarop is geklikt. We gebruiken ook jquery.easing, wat ons in staat stelt "easeOutQuad" te definiëren voor de eigenschap easing.
De laatste JavaScript ziet er als volgt uit:
$ (".col"). on ("klik", functie (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = this; var setX = parseInt (clickX); var setY = parseInt (clickY); $ (this) .find ("svg"). remove ( ); $ (this) .append (''); var c = $ (box) .find ("cirkel"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", duur: 400, stap: function (val) c.attr ("r", val); ); );Dit eenvoudige effect kan op een aantal manieren buiten ons voorbeeld worden gebruikt. Stel je bijvoorbeeld voor dat je identificeert waar in een afbeelding een persoon op heeft geklikt en een popover maakt om op dat gedeelte van de afbeelding te reageren en vervolgens de coördinaten op te slaan. Welke toepassingen kunt u vinden voor dit effect??
