Micaela 21 de diciembre de 2009 a las 08.38
   Imprimir artículo
elWebmaster.com

Dar efecto de reflejo a las im√°genes en tu sitio con jQuery y Mootools


reflejoEl reflejo espejado tan 2.0 tiene muchas aplicaciones. Sin embargo, no es muy pr√°ctico si a cada imagen a la que queremos dar este efecto la tenemos que abrir y editar en Photoshop.

Deja de perder el tiempo y conoce cómo hacer este efecto con Reflection.js de forma automática, aplicando JavaScript.

Reflection.js es una utilidad JavaScript disponible tanto para jQuery como para MooTools que crea reflexiones para cualquier imagen. Lo que hace es crear un nuevo elemento IMG con filtros especiales por si el cliente utiliza IE. Y si el cliente no usa IE, Reflection.js genera un elemento CANVAS y construye la reflexión a través de este elemento.

flores

El HTML

  1. <img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

Y la clase CSS reflect para cualquier imagen que desees reflejar.

La implementación del MooTools Javascript

  1. window.addEvent('domready',function() {
  2.     var options = { height: 0.5 };
  3.     $$('img.reflect').each(function(img) {
  4.         img.reflect(options);
  5.     });
  6. });

La versión MooTools de Reflection.js implementa el método reflect para crear las reflexiones.

La implementación del jQuery Javascript

  1. document.ready(function() {
  2.         var options = { opacity: 0.75 };
  3.         $('.reflect').reflect(options);
  4.     });

Bastante parecido al método MooTools, ejecutas el método reflect de cada elemento.

Mira el demo ¬Ľ

Descarga Reflection.js ¬Ľ

¬°No malgastes m√°s el tiempo haciendo reflejos en Photoshop! ¬°Utiliza el poder de JavaScript!

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Resultados personalizados en Google: Un gran cambio que pas√≥ desapercibido « Historial de un navegante dice:

    [...] 21 Diciembre 2009 de √Āngel Le√≠do en elwebmaster: [...]

  2. Pedro dice:

    Yo utilizaba una accion de photoshop que ahorraba algo de tiempo, pero con este metodo es mucho mas rapido! Gracias.

    Saludos.

  3. anthony ramirez dice:

    disculpen que los vuelva a molestar pero podrian decirme com oes que uso este interesante complemento por favor gracias x adelantado

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder