Guida Material Ripple Effect

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
B

Biuni

Utente Gold
16 Dicembre 2014
304
59
160
343
Material Ripple Effect
A simple and faster method to create a Material Ripple Effect.

​
Avete mai notato l'effetto usato nei Design Material che avviene al click di un qualsiasi button? Vi chiedete come sia possibile ricrearlo? Semplicissimo, vi basterà scaricare CSS e JS di questa guida e inserirle nel vostro file per riusare questo fantastico effetto anche nel vostro progetto. Funziona anche da mobile.

DEMO e DOWNLOAD: http://biuni.it/material-ripple-effect/
GITHUB: https://github.com/Biuni/Material-Ripple-Effect

Download
 
  • Mi piace
Reazioni: TheSeeker
Perchè devo installare e appesantire il mio sito web con JQuery per una feature?? L'effetto è bello ma io lo avrei scritto in JavaScript senza dipendenze..
 
  • Mi piace
Reazioni: TheSeeker
Rendernos ha detto:
Perchè devo installare e appesantire il mio sito web con JQuery per una feature?? L'effetto è bello ma io lo avrei scritto in JavaScript senza dipendenze..
Clicca per espandere...
Ovviamente con un minimo di conoscenza di JavaScript si può riscrivere lo stesso codice senza jQuery. Ho usato jQuery per comoditá e perchrè il 90% dei siti lo utilizza.
 
Dazorn ha detto:
Se sai come importarlo, jquery non ti appesantisce il sito :asd:
Clicca per espandere...
Di fatto, jQuery appesantisce sempre il sito. Questo perché in ogni caso aggiungi diversi kB, che tu stia caricando jQuery asincronamente o meno (o che sia in cache).
Per di più in questo contesto nemmeno puoi caricare asincronamente jQuery, infatti lo script ne fa' uso e devi assicurarti che la libreria venga caricata sempre prima.
 
Scanetatore ha detto:
Di fatto, jQuery appesantisce sempre il sito. Questo perché in ogni caso aggiungi diversi kB, che tu stia caricando jQuery asincronamente o meno (o che sia in cache).
Per di più in questo contesto nemmeno puoi caricare asincronamente jQuery, infatti lo script ne fa' uso e devi assicurarti che la libreria venga caricata sempre prima.
Clicca per espandere...
Si parla di qualche kb... non di mb. Comunque non parlavo di questo effetto ;)
 
Dazorn ha detto:
Si parla di qualche kb... non di mb. Comunque non parlavo di questo effetto ;)
Clicca per espandere...
Beh, sono circa 80 kB (anche meno se comprimi via server, sì), però neanche pochi se pensi a cosa puoi scrivere con quello spazio. ;) A livello di web performance bisogna valutare attentamente il progetto prima di includere librerie di qua e di là, altrimenti il passo è breve prima di arrivare a un peso non indifferente.
Ovviamente è un problema, come dicevo, che ti poni in base al target del sito che stai costruendo.

E se non ti riferivi a questo beh, meglio specificarlo, essendo in una release che ne parla. Anche se, dalla mia esperienza, se stai caricando jQuery lo fai perché vuoi usare un qualche script (tuo o di terzi) o qualche suo plugin.
 
  • Mi piace
Reazioni: TheSeeker
Ciao, inanzi tutto complimenti :), ho trovato in giro casualmente, dei codici, simili del tutto al tuo, eppure sono sotto tuo copy.. xDD

---
/**
* Created by Kupletsky Sergey on 04.09.14.
*
* Ripple-effect animation
* Tested and working in: ?IE9+, Chrome (Mobile + Desktop), ?Safari, ?Opera, ?Firefox.
* JQuery plugin add .ink span in element with class .ripple-effect
* Animation work on CSS3 by add/remove class .animate to .ink span
*/

(function($) {
$(".ripple-effect").click(function(e){
var rippler = $(this);
....
.....dinates
var x = e.pageX - rippler.offset().left - ink.width()/2;
var y = e.pageY - rippler.offset().top - ink.height()/2;

// set .ink position and add class .animate
ink.css({
top: y+'px',
left:x+'px'
}).addClass("animate");
})
})(jQuery);
 
hak2015 ha detto:
Ciao, inanzi tutto complimenti :), ho trovato in giro casualmente, dei codici, simili del tutto al tuo, eppure sono sotto tuo copy.. xDD

---
/**
* Created by Kupletsky Sergey on 04.09.14.
*
* Ripple-effect animation
* Tested and working in: ?IE9+, Chrome (Mobile + Desktop), ?Safari, ?Opera, ?Firefox.
* JQuery plugin add .ink span in element with class .ripple-effect
* Animation work on CSS3 by add/remove class .animate to .ink span
*/

(function($) {
$(".ripple-effect").click(function(e){
var rippler = $(this);
....
.....dinates
var x = e.pageX - rippler.offset().left - ink.width()/2;
var y = e.pageY - rippler.offset().top - ink.height()/2;

// set .ink position and add class .animate
ink.css({
top: y+'px',
left:x+'px'
}).addClass("animate");
})
})(jQuery);
Clicca per espandere...
Non cè nessun copy :) . Comunque si, ce ne sono una marea online e tutti molto simili.
 
Stato
Discussione chiusa ad ulteriori risposte.
Top Bottom
Indietro