Saltar al contenido →

¿Cómo se hizo? El portafolio – Segunda parte

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.

Este es el css que he utilizado para darle un estilo más agradable a la vista:

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.

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.

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.

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