Efecto en imágenes con HTML5 y jQuery

Con HTML5 y jQuery las imágenes pueden ser manipuladas en escala de grises sin tener que utilizar un software de edición de imágenes.

Para conseguir este efecto, antes debíamos de tener 2 imágenes, la imagen en escala de grises y la imagen en color, ahora podremos hacer todo esto generando dinámicamente la imagen en escala de grises desde la fuente original. Pero como vale más una imagen que mil palabras os dejo una demo de cómo funciona este efecto que resulta muy atractivo.

ver demo

En cuanto al a compatibilidad, funciona con cualquier navegador que soporte HTML 5 y javascript, como Chrome, Safari y Firefox.

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline- block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>

Como usarlo:

  • incluir una copia de jquery.js
  • pegue el código como se muestra arriba
  • establecer la imagen de destino (por ejemplo: . post-img, img, . img, etc)
  • puede cambiar la velocidad de la animación (es decir, 1000 = 1 segundo)

Vía: WebDesignerWall

Facebook
Twitter
LinkedIn
TAMBIÉN PUEDE INTERESARTE
Se anuncia que el próximo 10 de marzo, Facebook modificara todas las Fan Pages; el objetivo es asemejar el aspecto al de los perfiles. Las modificaciones son las siguientes:…
Esta web utiliza cookies propias y de terceros para analizar nuestros servicios y mostrarle publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de sus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Más informaciónPersonalizar Cookies   
Privacidad