Share
Lo que vas a crearLos nuevos esfuerzos de diseño de Google son muy amplios y justifican una gran cantidad de conversación. Pero en lugar de hablar sobre la teoría del diseño de materiales y las implicaciones de los nuevos esfuerzos de Google, nos centraremos en una técnica interesante que Google ha empleado en su página de inicio de diseño..
Cuando el usuario hace clic en uno de los bloques, un círculo SVG se expande desde el punto en que el usuario hace clic para llenar la mayor parte del cuadro. Google se refiere a esto como la onda del tacto. Vamos a recrear este efecto usando unas pocas líneas de jQuery, algo de HTML y CSS simples..
Empecemos!
Antes de comenzar, necesitamos configurar una cuadrícula básica. Vamos a construir los elementos de la cuadrícula sin utilizar un marco, pero esta técnica funcionaría con un marco perfectamente bien.
Las clases de columna se asignan a fracciones, de modo que "col-1-3" significa 1/3 del ancho del elemento contenedor.
A continuación, configuraremos nuestras clases de columna. Estamos usando MENOS, lo que nos permite anidar reglas y utilizar el Yoperador. No entraremos en los detalles específicos de MENOS, pero por el bien de este tutorial, explicaremos cómo Y el operador trabaja Pero primero, aquí está el MENOS de las columnas..
.col posición: relativo; bloqueo de pantalla; flotador izquierdo; margen: 1,25%; color de fondo: # 444; color: #fff; relleno: 100px; tamaño de caja: caja de borde; & .orange color de fondo: # EF8130; & .blue background-color: # 00ADE2; & .gray background-color: # 444; & .green background-color: # 76CE51; & -1- & 2 ancho: 47.5%; & 3 ancho: 30.8333%; & 4 ancho: 22.5%;
Observe la Y reglas. los Y el operador añade la cadena que la sigue al elemento principal. En otras palabras, este MENOS:
.col & -1 & -3 color: #fff;
Resultaría en este CSS:
.col-1-3 color: #fff;
Y este MENOS:
& .col & .orange background-color: # EF8130;
Resultaría en este CSS:
.col.orange background-color: # EF8130;
Si desea obtener más información sobre LESS, consulte estos tutoriales aquí en Tuts +:
A continuación, planifiquemos cómo funcionará el clic y cómo se colocará el SVG dentro de cada una de las casillas.
Cuando el usuario haga clic en cualquiera de los cuadros, calcularemos el desplazamiento de la posición del mouse desde la esquina de ese cuadro. Luego usaremos esas coordenadas para colocar el círculo. También posicionaremos absolutamente el elemento SVG dentro de las casillas, y las casillas serán posicionadas relativas. Utilizaremos los nativos de SVG.
Primero, configuremos el CSS para los elementos SVG.
svg posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; circle fill: rgba (255,255,255,0.1);
El relleno utiliza RGBa, que en efecto llena el elemento del círculo con blanco al 10%.
Primero, configuraremos un detector de clics en el .columna elementos, y tomar la posición del ratón en relación con el documento (esto ignora la posición de desplazamiento).
La posición es relativa a la caja misma; la esquina superior izquierda de la caja se obtiene usando $ (este) .offset ().
Accentsconagua
$ (". col"). en ("clic", función (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = this; //…);Nota: estamos usando jQuery para este ejemplo.
A continuación, convertiremos el clickX y clickY variables a enteros, ya que aparecen como flotadores en algunos navegadores. Esto garantiza que evitaremos cualquier problema de representación resultante del aliasing de subpixel. Tenga en cuenta, sin embargo, que esto no sería necesariamente necesario para que el efecto funcione.
var setX = parseInt (clickX); var setY = parseInt (clickY);
A continuación, eliminaremos cualquier elemento SVG existente de nuestra casilla en la que se hizo clic. Si planea agregar un SVG al contenido del cuadro, asegúrese de usar algo como jQuery's.no() en combinación con una clase para evitar eliminar su contenido.
$ (this) .find ("svg"). remove ();A continuación, agregamos nuestro SVG, que estamos creando al pasar texto a la función jQuery.
$ (esto) .append ('');los setX y establecerY coloque el centro del círculo en el punto del clic que obtuvimos anteriormente.
A continuación, animamos el r propiedad (que establece el radio) usando jQuery animar función. La función animar no admite propiedades de animación, por lo que usamos el paso Opción, que se llama después de cada paso de la propia animación..
var c = $ (caja) .find ("círculo"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", duración: 400, step: function (val) c.attr ("r", val); );Recuérdalo caja Se define anteriormente como el cuadro en el que se hizo clic. También estamos utilizando jquery.easing, que es lo que nos permite definir "easeOutQuad" para la propiedad de aceleración.
El JavaScript final se verá así:
$ (". col"). en ("clic", función (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 ( ); $ (esto) .append (''); var c = $ (caja) .find ("círculo"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", duración: 400, step: function (val) c.attr ("r", val); ); );Este simple efecto se puede utilizar de varias maneras más allá de nuestro ejemplo. Imagine, por ejemplo, identificar en qué parte de la imagen hizo clic una persona y crear una ventana emergente para comentar sobre esa parte de la imagen y luego guardar las coordenadas. ¿Qué usos puedes encontrar para este efecto??
