Come realizzare un Portfolio Filtrabile usando Quicksand.js

quicksand
Tempo stimato di lettura: 1 minuto, 35 secondi
Pubblicato il 13 novembre 2012

Per noi Web Designer avere un portfolio in cui sono presenti i nostri lavori è fondamentale, ma ancor più fondamentale è creare un portfolio con qualche effetto che stupisca e stimoli i nostri futuri clienti. Oggi voglio spiegarti come creare un portfolio lavori dove puoi filtrare le categorie e animare le anteprime grazie a un fantastico plugin e qualche riga di codice. Il plugin di cui ti sto parlando è Quicksand.js.

Html

Il documento che dovrai editare sarà composto da Html5 poiché Quicksand per funzionare ha bisogno di alcuni tag Html5 ed in particolare dell’attributo “data”. Questo è tutto l’ Html di cui hai bisogno, sono davvero pochissime righe.

jQuery

Come avrai notato nell’ head del documento Html ho inserito quattro file javascript che ti serviranno per far funzionare il tutto.

Di questi quattro script quello che devi modificare a seconda delle tue esigenze è il quarto (script.js). In questo script devi impostare la “sorgente” e la “destinazione”. La sorgente in questo caso è “#filter”, mentre la destinazione è “ul.olderfilter”. Come puoi vedere la “sorgente” è presente nella terza, settima e nona riga mentre la “destinazione” è presente solo nella quarta riga. Altri valori interessanti sono “duration:750” che indica il tempo dell’animazione in millisecondi e “easing: easeInOutQuad” che indica l’andamento dell’animazione che abbiamo scelto.

Css

Ora devi solo stilizzare il tutto con i Css, basta qualche regola ed il gioco è fatto.

Visualizza la demo

Conclusioni

Con qualche riga di Html, Css e jQuery puoi avere un fantastico portfolio per ammaliare i tuoi clienti. Naturalmente puoi usare questo script per filtrare qualsiasi altro elemento. Cosa aspetti allora ? Mettiti subito all’opera ed implementa Quicksand nel tuo portfolio personale per filtrare i tuoi lavori. Se ti và nei commenti linkami il risultato che hai ottenuto. Per oggi è tutto, buona lettura e alla prossima.

Codice tratto da: http://goo.gl/8uIYV

Shares