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.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Tutorial Portfolio Quicksand.js</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.quicksand.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="container"> <h1>Tutorial Portfolio Quicksand.js</h1> <ul id="filter"> <li class="active"><a href="#" class="all">All</a></li> <li><a href="#" class="web">WEB</a></li> <li><a href="#" class="mobile">MOBILE</a></li> <li><a href="#" class="flayer">FLAYER</a></li> </ul><!--\ end filter --> <ul class="holderfilter"> <li class="item" data-id="id-1" data-type="web"> <img src="images/web.png" alt="" /> </li> <li class="item" data-id="id-2" data-type="mobile"> <img src="images/mobile.png" alt="" /> </li> <li class="item" data-id="id-3" data-type="flayer"> <img src="images/flayer.png" alt="" /> </li> <li class="item" data-id="id-4" data-type="flayer"> <img src="images/flayer.png" alt="" /> </li> <li class="item" data-id="id-5" data-type="web"> <img src="images/web.png" alt="" /> </li> <li class="item" data-id="id-6" data-type="mobile"> <img src="images/mobile.png" alt="" /> </li> <li class="item" data-id="id-7" data-type="flayer"> <img src="images/flayer.png" alt="" /> </li> <li class="item" data-id="id-8" data-type="web"> <img src="images/web.png" alt="" /> </li> <li class="item" data-id="id-9" data-type="flayer"> <img src="images/flayer.png" alt="" /> </li> <li class="item" data-id="id-10" data-type="mobile"> <img src="images/mobile.png" alt="" /> </li> </ul><!--\ end holderfilter --> </div><!--\ end container --> </body> </html>
jQuery
Come avrai notato nell’ head del documento Html ho inserito quattro file javascript che ti serviranno per far funzionare il tutto.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.quicksand.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/script.js"></script>
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.
$(document).ready(function() {
var $filterType = $('#filter li.active a').attr('class');
var $holder = $('ul.holderfilter');
var $data = $holder.clone();
$('#filter li a').click(function(e) {
$('#filter li').removeClass('active');
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
if ($filterType == 'all') {
var $filteredData = $data.find('li');
}
else {
var $filteredData = $data.find('li[data-type=' + $filterType + ']');
}
$holder.quicksand($filteredData, {
duration: 750,
easing: 'easeInOutQuad'
});
return false;
});
});
Css
Ora devi solo stilizzare il tutto con i Css, basta qualche regola ed il gioco è fatto.
/* general */
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { font: 14px "Helvetica", Arial, sans-serif; color: #000; }
ul { list-style: none; margin: 0; padding: 0; }
#container { width: 960px; margin: 0 auto; }
h1 { text-align: center; }
/* filter */
#filter { width: 330px; margin: 30px 0 30px 10px; overflow: hidden; }
#filter li { display: inline-block; float: left; }
#filter li a { padding: 5px 20px; color: #000; text-decoration: none; display: block;}
#filter li a:hover { text-decoration: underline; }
#filter li.active a { background: #555; color: #fff; }
/* filterolder */
.holderfilter { width:960px; height:850px; overflow:hidden;}
.holderfilter li.item { width: 220px; height: 165px; padding: 10px; float: left; overflow: hidden;}
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
