En la primera parte, he explicado cómo aplicar el efecto 3D rollover a las tarjetas de proyecto. En esta segunda parte, voy a explicar cómo, utilizando el plugin de javascript Quicksand, aplicar un efecto divertido para filtrar las tarjetas. Quicksand permite crear un filtro dinámico que puede mostrar, ocultar y ordenar imágenes o bloques de html con un efecto a elegir. Utilizando el plugin Easing, podemos seleccionar entre una lista de animaciones.
El filtro
En mi caso, tengo mis proyectos del portafolio categorizados en tipos de proyectos. He creado tres tipos de proyectos: iOS, Plugins y Web. Antes de nada, vamos a crear los enlaces para crear el filtro que utilizaremos después. Este es el código html:
Se compone de una lista desordenada de enlaces. Estos enlaces no llevan url sino un ancla «#plugins«, «#web«, «#ios-type» o «#todos«. Estos tags nos permitirán filtrar las tarjetas de proyectos como veremos luego utilizando javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Filtro de proyectos. --> <ul id="proyectos-filter" class="filtro"> <li class="filtro-term active"> title="Filtrar por todos">Todos</li> <li class="filtro-term"> <a title="Filtar por iOS" href="#ios-type">iOS</a></li> <li class="filtro-term"> <a title="Filtar por Plugins" href="#plugins">Plugins</a></li> <li class="filtro-term"> <a title="Filtar por Web" href="#web">Web</a></li> </ul> <!-- Fin del filtro de proyectos. --> |
Este es el css que he utilizado para darle un estilo más agradable a la vista:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** Filtro **/ .filtro { list-style-type: none; overflow: hidden; } .filtro .filtro-term { display: block; float: left; margin-right: 15px; background: #ABABAB; border: 1px solid #ABABAB; } .filtro .filtro-term a { color: #676767; text-decoration: none; display: block; padding: 5px 10px; } .filtro .filtro-term:hover, .filtro .filtro-term.active { background: #944A4A; } .filtro .filtro-term:hover a, .filtro .filtro-term.active a { color: #F2F2F2; } |
Creo que no es necesario explicar nada, es bastante sencillo. Si tenéis alguna duda, preguntadme en los comentarios.
Cambios en la lista de tarjetas de proyectos
Ahora tenemos que realizar un par de cambios pequeños en el HTML de nuestro código de la primera parte para poder hacer funcionar el plugin Quicksand.
|
1 2 |
<!-- Lista de proyectos. --> <ul id="proyectos" class="proyectos-lista"> |
Primero, añado un id «proyectos» a la lista desordenada de proyectos. Esto me permite acceder a esta lista de forma sencilla desde el javascript.
|
1 2 3 4 5 6 7 8 |
<!-- Tarjeta de un proyecto. --> <li data-id="id-1" data-type="ios-type" class="proyecto-tarjeta"> ... <li data-id="id-2" data-type="plugins" class="proyecto-tarjeta"> ... <li data-id="id-3" data-type="web" class="proyecto-tarjeta"> ... <li data-id="id-4" data-type="web" class="proyecto-tarjeta"> |
En segundo lugar, añado las siguientes propiedades a cada elemento de la lista de proyectos:
- data-id: Almacenará un identificador único para el proyecto. Esto realmente no tiene ninguna funcionalidad en este ejemplo.
- data-type: Aquí se almacenará el tipo del proyecto que cómo podremos ver se corresponden con los tags que hemos puesto en el filtro más arriba.
El javascript
Sólo nos queda por escribir el código javascript para hacer funcionar nuestro plugin Quicksand.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function() { // Lista desordenada de proyectos. var $proyectos = $('#proyectos'); // Clonamos la lista. var $data = $proyectos.clone(); // Evento onclick. $('.filtro-term a').click(function(e) { // Cogemos el tag, eliminando el #. var $filteredType = ($(this).attr('href')).replace('#', ''); // Almacenamos en $filteredData cada tarjeta de proyecto. var $filteredData = $data.find('li'); // Si estamos filtrando por algo distinto a todos. if ($filteredType != 'todos') { // Debemos quedarnos sólo con las tarjetas de proyectos que tienen // data-type igual a nuestro $filteredType. $filteredData = $data.find('li[data-type='+$filteredType+']'); } // Llamamos a nuestro plugin para que actúe sobre nuestra lista de proyectos // utilizando nuestros datos filtrados $filteredData. O sea que sólo le // pasamos los proyectos que queremos ver, los del data-type correcto. $('#proyectos').quicksand($filteredData, { duration: 900, adjustHeight: 'dynamic', adjustWidth: 'dynamic', atomic: true }); // Eliminamos la clase active del filtro que estaba activo. $('.filtro-term.active').removeClass('active'); // Añadimos la clase active al filtro que está activo ahora. $(this).parent().addClass('active'); e.preventDefault(); }); }); |
En el código, he puesto comentarios para que podáis entender que función tiene cada porción de código. Para entender las distintas opciones con las que podéis configurar el Quicksand, lo más sencillo es que leáis la documentación del propio plugin. Si tenéis alguna pregunta, no dudéis en dejar un comentario.
Como siempre, os dejo un enlace a la demo completa: VER DEMO
