Share
Was Sie erstellen werdenDie neuen Designanstrengungen von Google sind enorm und rechtfertigen eine beträchtliche Menge an Gesprächen. Anstatt über die Theorie des Materialdesigns und die Auswirkungen der neuesten Bemühungen von Google zu sprechen, konzentrieren wir uns auf eine interessante Technik, die Google auf ihrer Design-Landing-Page verwendet hat.
Wenn der Benutzer auf einen der Blöcke klickt, wird ein SVG-Kreis vom Punkt des Klicks des Benutzers aus erweitert, um den größten Teil des Felds auszufüllen. Google bezeichnet dies als Berührungswelligkeit. Wir werden diesen Effekt mit ein paar Zeilen jQuery, ein paar einfachen HTML- und CSS-Zeilen neu erstellen.
Lass uns anfangen!
Bevor wir beginnen, müssen wir ein Grundraster einrichten. Wir werden die Gitterelemente ohne Framework erstellen, aber diese Technik würde mit einem Framework perfekt funktionieren.
Die Spaltenklassen sind Brüchen zugeordnet, so dass "col-1-3" 1/3 der Breite des enthaltenden Elements bedeutet.
Als nächstes werden wir unsere Spaltenklassen einrichten. Wir verwenden LESS, um Regeln zu verschachteln und die Regeln zu nutzen &Operator. Wir werden uns nicht mit den Besonderheiten von LESS beschäftigen, aber im Interesse dieses Tutorials erklären wir, wie das geht & Betreiber arbeitet. Aber zuerst ist hier der WENIGER für die Spalten.
.col position: relativ; Bildschirmsperre; Schwimmer: links; Marge: 1,25%; Hintergrundfarbe: # 444; Farbe: #fff; Polsterung: 100px; Box-Dimensionierung: Border-Box; & .orange Hintergrundfarbe: # EF8130; & .blue Hintergrundfarbe: # 00ADE2; & .gray Hintergrundfarbe: # 444; & .green Hintergrundfarbe: # 76CE51; & -1- & 2 Breite: 47,5%; & 3 Breite: 30,8333%; & 4 Breite: 22,5%;
Beachten Sie die & Regeln. Das & Der Operator hängt die Zeichenfolge an das übergeordnete Element an. Mit anderen Worten, dies WENIGER:
.col & -1 & -3 color: #fff;
Würde zu diesem CSS führen:
.col-1-3 color: #fff;
Und das WENIGER:
& .col & .orange Hintergrundfarbe: # EF8130;
Würde zu diesem CSS führen:
.col.orange Hintergrundfarbe: # EF8130;
Wenn Sie mehr über LESS erfahren möchten, werfen Sie einen Blick auf diese Tutorials hier auf Tuts +:
Als Nächstes planen wir, wie der Klick funktioniert und wie die SVG in die einzelnen Boxen eingefügt wird.
Wenn der Benutzer auf eines der Felder klickt, berechnen wir den Versatz der Mausposition aus der Ecke dieses Felds. Wir werden diese Koordinaten dann verwenden, um den Kreis zu platzieren. Wir werden das SVG-Element auch absolut innerhalb der Boxen positionieren, und die Boxen selbst werden relativ zueinander positioniert. Wir werden das native SVG verwenden
Zuerst richten wir das CSS für die SVG-Elemente ein.
svg position: absolut; oben: 0; links: 0; Breite: 100%; Höhe: 100%; circle fill: rgba (255,255,255,0,1);
Die Füllung verwendet RGBa, wodurch das Kreiselement mit 10% Weiß gefüllt wird..
Zuerst richten wir einen Klick-Listener auf .col Elemente und greifen Sie die Position der Maus relativ zum Dokument (dies ignoriert die Bildlaufposition).
Die Position ist relativ zur Box selbst; Die obere linke Ecke der Box wird mit abgerufen $ (this) .offset ().
Accentsconagua
$ (". col"). on ("click", Funktion (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = this; //…);Hinweis: Wir verwenden für dieses Beispiel jQuery.
Als nächstes werden wir das konvertieren clickX und clickY Variablen zu ganzen Zahlen, da sie in einigen Browsern als Floats angezeigt werden. Dadurch wird sichergestellt, dass Rendering-Probleme aufgrund von Subpixel-Aliasing vermieden werden. Beachten Sie jedoch, dass dies nicht unbedingt erforderlich ist, damit der Effekt funktioniert.
var setX = parseInt (clickX); var setY = parseInt (clickY);
Als Nächstes entfernen wir alle vorhandenen SVG-Elemente aus unserem angeklickten Feld. Wenn Sie dem Inhalt der Box eine SVG hinzufügen möchten, stellen Sie sicher, dass Sie so etwas wie jQuery verwenden.nicht() in Kombination mit einer Klasse, um das Entfernen Ihrer Inhalte zu vermeiden.
$ (this) .find ("svg"). remove ();Als Nächstes hängen wir unsere SVG-Datei an, die wir erstellen, indem Sie Text in die jQuery-Funktion übergeben.
$ (this) .append ('');Das setX und setY Positionieren Sie den Mittelpunkt des Kreises an dem Punkt des Klicks, den wir zuvor abgeleitet haben.
Als nächstes animieren wir die r Eigenschaft (die den Radius festlegt) unter Verwendung von jQuery animieren Funktion. Die animierte Funktion unterstützt keine animierten Eigenschaften, daher verwenden wir die Schritt Option, die nach jedem Schritt der Animation aufgerufen wird.
var c = $ (Box) .find ("Kreis"); c.animate ("r": $ (Box) .outerWidth ()), Beschleunigung: "easeOutQuad", Dauer: 400, Schritt: function (val) c.attr ("r", val); );Erinnere dich daran Box wurde früher als die Box definiert, auf die geklickt wurde. Wir verwenden auch jquery.easing, was uns erlaubt, "easeOutQuad" für die Beschleunigungseigenschaft zu definieren.
Das endgültige JavaScript wird folgendermaßen aussehen:
$ (". col"). on ("click", Funktion (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 ("Kreis"); c.animate ("r": $ (Box) .outerWidth ()), Beschleunigung: "easeOutQuad", Dauer: 400, Schritt: function (val) c.attr ("r", val); ); );Dieser einfache Effekt kann über unser Beispiel hinaus auf verschiedene Arten genutzt werden. Stellen Sie sich zum Beispiel vor, Sie würden herausfinden, wo in einem Bild eine Person geklickt hat, und ein Popover erstellen, um diesen Teil des Bildes zu kommentieren, und anschließend die Koordinaten speichern. Welchen Nutzen können Sie für diesen Effekt finden??
