Hace unos cuantos meses, para un cliente, cree una página de portfolio con filtros y también con efectos hover para cada uno de los proyectos del propio portfolio. Conseguí esos efectos con CSS3 y con un plugin de jQuery para filtrar y ordenar llamado MixItUp.
El resultado fue excepcional, y al cliente le encantó. Supongo que fue debido a lo vistoso del filtrado, con los objetos recolocándose solos y demás. Es de estas cosas que parecen muy curradas para los clientes, pero que luego, en realidad, no llevan tanto trabajo.
He querido compartir cómo hice esto con todos vosotros pero de una manera actualizada ahora que se ha lanzado la versión 2.1.11. Estas son las mejoras que haré sobre mi código original, aquel que utilicé con el cliente:
Actualizaremos el proyecto a la nueva versión de MixItUp, ya que la que utilicé está desfasadilla ya. Lo bueno de implantar esta nueva versión es que trae consigo mejoras como cargar el filtro deseado en la primera ejecución, sin tener que mostrarlos todos.
Eliminaré el plugin easing y lo sustituiré con transiciones de CSS3. Si puedo hacer lo mismo a un mejor rendimiento, ¿por qué no hacerlo?
Mas que nada esto es un to-do para mi, más que para vosotros, pero me apetecía compartir todos estos menesteres, creo que así nuestra relación es mucho más cercana. Sin más dilación, vamos a ver cómo implementar un simple portfolio responsive con filtros y efectos hover.
HTML
En primer lugar, tenemos el código HTML para la navegación. Es una lista UL con filtros. Se incluye data-filter porque MixItUp lo necesita para llevar a cabo su filtrado. Las clases están especificadas en data-filter para ser coherentes con filter() de jQuery.
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter=".app, .card, .icon, .logo, .web">All</span></li>
<li><span class="filter" data-filter=".app">App</span></li>
<li><span class="filter" data-filter=".card">Card</span></li>
<li><span class="filter" data-filter=".icon">Icon</span></li>
<li><span class="filter" data-filter=".logo">Logo</span></li>
<li><span class="filter" data-filter=".web">Web</span></li>
</ul>
Debajo de la navegación tenemos el listado de proyectos del portfolio. Tenemos que asignar cada portfolio a una categoría en el atributo data-cat. Tendrá que coincidir data-filter con data-cat, así es como MixItUp filtra los proyectos.
Aparte de eso, hemos añadido la etiqueta y lo escondemos por defecto. Vamos a mostrar el hover con CSS3.
<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="img/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"> </div>
</div>
</div>
</div>
.........
</div>
CSS
Dividimos el CSS en dos partes: el estilo general para los elementos UI y el responsive.
html {
overflow-y: scroll;
}
.container {
position: relative;
width: 960px;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#filters {
margin:1%;
padding:0;
list-style:none;
}
#filters li {
float:left;
}
#filters li span {
display: block;
padding:5px 20px;
text-decoration:none;
color:#666;
cursor: pointer;
}
#filters li span.active {
background: #e95a44;
color:#fff;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}
.portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}
.portfolio img {
max-width:100%;
position: relative;
top:0;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.portfolio .label {
position: absolute;
width: 100%;
height:40px;
bottom:-40px;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.portfolio .label-bg {
background: #e95a44;
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}
.portfolio .label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .text-category {
display:block;
font-size:9px;
}
.portfolio:hover .label {
bottom:0;
}
.portfolio:hover img {
top:-30px;
}
Un simple diseño responsive para asegurarnos que el grid se muestra correctamente en todas las resoluciones de pantalla. Elimina este trozo de código si tu ya tienes tu propio sistema grid responsive.
/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 768px;
}
}
/* #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container {
width: 95%;
}
#portfoliolist .portfolio {
width:48%;
margin:1%;
}
}
/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 70%;
}
}
Javascript
Por último tenemos el Javascript. Si quieres cambiar alguna de las opciones del plugin, visita su documentación. Como véis es muy simple y muy explicativo. No creo que tengas ningún problkema a la hora de abordar el código.
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixItUp({
selectors: {
target: '.portfolio',
filter: '.filter'
},
load: {
filter: '.app' // show app tab on first load
}
});
}
};
// Run the show!
filterList.init();
});
Hoy en día, los diseñadores tienden a reducirlo todo y a mantenerlo simple. Con este tutorial, hemos creado un simple portfolio responsive con filtros y efectos hover. A veces no tenemos que reinventar la rueda. Con todo tipo de plugins disponibles en la actualidad, podemos producir fácilmente el efecto que queremos mediante la combinación de diferentes plugins de Javascript.
Fuente: queness.com