Efecto cortina con CSS3, jQuery y MooTools

En este artículo explicamos como llevar a cabo la codificación del efecto cortina mediante el uso de CSS3 y dos de los frameworks más utilizados de JavaScript: jQuery y Mootools.

Al utilizar transiciones a lo largo y ancho de nuestro sitio, buscamos crear una mejor experiencia para el usuario, dando pautas, estilos y efectos que muestren contenido de forma animada. Es común buscar mantener una interactividad a través de los efectos, pero el uso excesivo o la complejidad de estos puede causar un resultado completamente contrario al esperado.

Debemos tratar de hacer uso de efectos simples que agreguen clase a nuestro sitio, esto hará que luzca bien sin renunciar al dinamismo. No debemos sobrexplotar el espacio con el que contamos con miles de efectos aleatorios o de distinto corte, ya que esto puede confundir al usuario, y peor aún abrumarlo y hacer que no regrese al sitio.

Es por ello, que en esta ocasión traemos un efecto muy sencillo, fácil de reconocer para la vista y que agrega estilo a nuestros bloques de información. Estamos hablando del efecto cortina, que simplemente consiste en modificar la propiedad “margin-top” de un elemento para realizar un cambio entre dos paneles, uno que muestre una imagen y otro donde se despliegue su información.

En esta ocasión haremos uso del lenguaje de estilo CSS y dos de los frameworks de JavaScript más populares para llevar a cabo la misma tarea, al final del artículo tu decidirás cual de las tres opciones es la mejor y es la que aplicarás en tu sitio.

Estructura base con HTML

Lo primero que debemos hacer para iniciar nuestro proyecto, es estructurar las partes a las que aplicaremos el efecto. En esta ocasión utilizaremos un conjunto de elementos muy sencillos, los cuales en conjunto ilustrarán nuestro ejemplo, empezaremos con una capa para envolver el artículo, dentro de la cual incluiremos un enlace uqe nos permitirá ir a otra parte del sitio, dentro de este enlace englobaremos los dos elementos que se mostrarán en la transición.

<div class="articulo">
  <a href="https://www.lawebera.es">
    <div class="imagen_articulo">
      <img src="url-imagen" />
      <h3>www.lawebera.es</h3>
    </div>
    <div class="detalles_articulo">
      <p>En esta página encontrarás cantidad de información para aprender a hacer tus páginas web, además de amplios servicios de diseño web profesional para empresas y particulares.</p>
    </div>
  </a>
</div>

A esta estructura debemos aplicarle un estilo por defecto que permita desplegar los elementos de la manera que deseamos, para ello haremos uso del siguiente CSS:

.articulo {
  position: relative;
  width: 270px;
  overflow: hidden;
  border: 1px solid #ccc;
  height: 120px;
}

.articulo a {
  text-decoration: none;
  color: #000;
}

.imagen_articulo, .detalles_articulo {
  padding: 10px;
  height: 100px;
}

.imagen_articulo {
  margin-top: 0;
  background: #000000;
}
.imagen_articulo h3 {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  font-family: "Open Sans", arial, sans-serif;
  text-align: center;
}

.detalles_articulo {
  background: #EEEEEE;
  color: #666666;
  font-family: Arial;
  font-size: 12px;
}

Efecto cortina con CSS3

El primer método que utilizaremos para realizar la animación, hace uso únicamente del lenguaje de estilo CSS, lo que permite que se pueda observar en cualquier navegador moderno sin necesidad de agregar alguna librería a nuestro sitio.

Para poder lograr desplegar el efecto basta con agregar unas cuantas líneas al CSS con el que ya contamos, a la clase “imagen_articulo” agregaremos la transición para que el bloque remueva su margen superior. Para ello bastan dos líneas de código, pero debido a que la transición forma parte de CSS3 aún no tenemos un estándar para todos los navegadores, por lo que debemos poner todas las opciones que existen.

.imagen_articulo {
  margin-top: 0;
  background: #000000;

  -webkit-transition-property: margin-top;
  -webkit-transition-duration: .5s;

  -moz-transition-property: margin-top;
  -moz-transition-duration: .5s;

  -o-transition-property: margin-top;
  -o-transition-duration: .5s;

  -ms-transition-property: margin-top;
  -ms-transition-duration: .5s;

}

Después de esto haremos uso de la pseudo clase “hover”, para que cuando el puntero del mouse se encuentre sobre el elemento “artículo” el margen sea reducido, al igual que el margen del elemento “image_articulo”.

.articulo:hover .imagen_articulo {
  margin-top: -120px;
}

Como se puede observar este método es bastante sencillo, desafortunadamente no funcionará si el navegador es muy viejo o no tiene activadas las transiciones. Para esos casos se puede optar por utilizar un framework de JavaScript para que lleve a cabo el procedimiento.

Cortina con jQuery

Al utilizar jQuery, basta con englobar todos los elementos a los que queremos aplicar el efecto, mediante un selector. Basándonos en la estructura que dimos en la primera sección de este artículo, tenemos que el elemento “articulo” es el encargado de mostrar la transición, por lo que es el que debemos llamar con nuestro selector.

Una vez capturado el elemento le debemos aplicar una animación, la cual se encargará de reducir el margen superior de los elementos con contenido, todo esto al momento de colocar el mouse sobre el bloque. En contraparte regresaremos la estructura a su estado normal, cuando se realice la acción de quitar el mouse del bloque.

Nuestro código lucirá de la siguiente manera:

jQuery(document).ready(function() {
  jQuery(".articulo").bind({
    mouseenter: function() {
      var self = jQuery(this), imagen = self.data("elementoImagen");
      if(!imagen) {
        imagen = jQuery(jQuery(".imagen_articulo", this)[0]);
        self.data("elementoImagen", imagen);
      }
      jQuery(imagen).stop().animate({
        "margin-top": "-120px"
      });
    },
    mouseleave: function() {
      jQuery(this).data("elementoImagen").stop().animate({
        "margin-top": 0
      });
    }
  });
});

Si decidimos utilizar este método, debes tener en mente que las transiciones que se agregaron con CSS ya no tendrán efecto, ya que lo declarado con JavaScript tomará el control.

Método cortina con MooTools

Para realizar este mismo efecto con MooTools debemos recurrir a la misma metodología, lo único que variará será obviamente el nombre de las funciones y el código puesto que son dos frameworks distintos.

window.addEvent("domready", function() {
  $$(".articulo").addEvents({
    mouseenter: function() {
      var imagen = this.retrieve("elementoImagen");
      if(!imagen) {
        imagen = this.getElements(".imagen_articulo")[0];
        this.store("elementoImagen", imagen);
      }
      imagen.tween("margin-top", "-120px");
    },
    mouseleave: function() {
      this.retrieve("elementoImagen").tween("margin-top", 0);
    }
  });
});

Como se puede apreviar, hacemos uso de los mismos eventos para disparar las acciones, y en el caso de MooTools hacemos uso de la función Tween. Esta función ya esta definida dentro de la clase padre Fx, y se encargará de hacer exactamente lo que buscamos.