Share
Cosa starai creandoI nuovi sforzi di progettazione di Google sono vasti e giustificano una quantità significativa di conversazioni. Ma invece di parlare della teoria del Material Design e delle implicazioni dei nuovi sforzi di Google, ci concentreremo su una tecnica interessante che Google ha utilizzato sulla loro pagina di destinazione Design.
Quando l'utente fa clic su uno dei blocchi, un cerchio SVG si espande dal punto del clic dell'utente per riempire la maggior parte della casella. Google si riferisce a questo come il ripple tocco. Ricreeremo questo effetto usando poche righe di jQuery, alcuni semplici HTML e CSS.
Iniziamo!
Prima di iniziare, abbiamo bisogno di creare una griglia di base. Stiamo andando a costruire gli elementi della griglia senza usare un framework, ma questa tecnica funzionerebbe perfettamente con un framework.
Le classi di colonna vengono mappate in frazioni, in modo che "col-1-3" significhi 1/3 della larghezza dell'elemento contenitore.
Successivamente, imposteremo le nostre classi di colonne. Usiamo MENO, che ci permette di annidare le regole e utilizzare il &operatore. Non entreremo nello specifico di LESS, ma per il bene di questo tutorial, spiegheremo come & l'operatore lavora. Ma prima, ecco il MENO per le colonne.
.col posizione: relativa; blocco di visualizzazione; fluttuare: a sinistra; margine: 1,25%; background-color: # 444; colore: #fff; imbottitura: 100px; dimensionamento della scatola: border-box; & .orange background-color: # EF8130; & .blue background-color: # 00ADE2; & .gray background-color: # 444; & .green background-color: # 76CE51; & -1- & 2 larghezza: 47,5%; & 3 width: 30.8333%; & 4 larghezza: 22,5%;
Notare il & regole. Il & l'operatore accoda la stringa che la segue all'elemento padre. In altre parole, questo MENO:
.col & -1 & -3 color: #fff;
Sarebbe risultato in questo CSS:
.col-1-3 color: #fff;
E questo meno:
& .col & .orange background-color: # EF8130;
Sarebbe risultato in questo CSS:
.col.orange background-color: # EF8130;
Se vuoi saperne di più su LESS, dai un'occhiata a questi tutorial qui su Tuts +:
Quindi, pianifichiamo come funzionerà il clic e come SVG verrà inserito in ciascuna casella.
Quando l'utente fa clic su una delle caselle, calcoleremo l'offset della posizione del mouse dall'angolo di quella casella. Useremo quindi quelle coordinate per posizionare il cerchio. Posizioneremo inoltre in modo assoluto l'elemento SVG all'interno delle caselle e le caselle stesse saranno posizionate relative. Utilizzeremo il nativo di SVG
Per prima cosa, impostiamo il CSS per gli elementi SVG.
svg position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; circle fill: rgba (255,255,255,0.1);
Il riempimento utilizza RGBa, che in effetti riempie l'elemento del cerchio con il bianco al 10%.
Innanzitutto, configureremo un ascoltatore di clic su .col elementi e prendi la posizione del mouse rispetto al documento (questo ignora la posizione di scorrimento).
La posizione è relativa alla scatola stessa; l'angolo in alto a sinistra della scatola viene recuperato usando $ (This) .Offset ().
Accentsconagua
$ (". col"). on ("clic", funzione (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: stiamo usando jQuery per questo esempio.
Successivamente, convertiremo il clickX e Clicky variabili agli interi, poiché si presentano come float in alcuni browser. In questo modo evitiamo qualsiasi problema di rendering derivante dall'aliasing subpixel. Si noti, tuttavia, che questo non sarebbe necessariamente necessario affinché l'effetto funzioni.
var setX = parseInt (clickX); var setY = parseInt (clickY);
Successivamente, rimuoveremo tutti gli elementi SVG esistenti dalla nostra casella cliccata. Se hai intenzione di aggiungere un SVG al contenuto della scatola, assicurati di utilizzare qualcosa come jQuery.non() in combinazione con una classe per evitare di rimuovere i tuoi contenuti.
. $ (This) .find ( "SVG") rimuovere ();
Successivamente, aggiungiamo il nostro SVG, che stiamo creando passando il testo nella funzione jQuery.
$ (This) .Append ('');Il setX e sety posiziona il centro del cerchio nel punto del clic che abbiamo ricavato in precedenza.
Successivamente, animiamo il r proprietà (che imposta il raggio) usando jQuery animare funzione. La funzione animata non supporta le proprietà di animazione, quindi usiamo il passo opzione, che viene chiamata dopo ogni fase dell'animazione stessa.
var c = $ (box) .find ("circle"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", durata: 400, step: function (val) c.attr ("r", val); );Ricordatelo scatola è definito in precedenza come la casella su cui è stato fatto clic. Stiamo anche utilizzando jquery.easing, che è ciò che ci permette di definire "easeOutQuad" per la proprietà easing.
Il JavaScript finale sarà simile a questo:
$ (". col"). on ("clic", funzione (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 ("circle"); c.animate ("r": $ (box) .outerWidth (), easing: "easeOutQuad", durata: 400, step: function (val) c.attr ("r", val); ); );Questo semplice effetto può essere usato in molti modi diversi dal nostro esempio. Immagina, ad esempio, di identificare in quale immagine di una persona è stato fatto clic e di creare un popover per commentare quella parte dell'immagine e successivamente salvare le coordinate. Quali usi puoi trovare per questo effetto?
