Bufa Webmaster » fade

Rollover Fade de imagen de blanco y negro a color

Jorge Maiden — Thu, 10 Mar 2011 20:56:52 +0000

Este es un efecto (fade de una imagen de blanco a color) muy atractivo que podemos conseguir utilizando html5, y jQuery. Para conseguir este efecto antes de HTML5 eran necesario utilizar 2 imagenes (una a color y otra a blanco y negro).

Ahora HTML 5 lo hace más fácil y rápido porque la imagen en escala de grises se genera de la foto original.

Funciona con cualquier navegador que soporte HTML 5 (Chrome, Safari y Firefox)

$(window).load(function(){

// Aplicamos el efecto con la clase ".fadegray" en las imagenes que queramos
$("img.fadegray").animate({opacity:1},500);

// clonamos imagen
$('img.fadegray').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap('

').clone().addClass('img_escala_grises').css({"position":"absolute","z-index":"666","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = escala_grises(this.src);
});

// Fade imagen
$('img.fadegray').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 500);
})
$('.img_escala_grises').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});

// Canvas
function escala_grises(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();
}

DEMO

CSS3: efecto fade

Jorge Maiden — Sat, 15 Jan 2011 13:23:43 +0000

Ya os enseñe como poder crear este efecto fade con jQuery. Hoy os muestro como poder hacer este efecto utilizando solo CSS3.

Voy a crear una clase CSS llamada “.fade” y se la vamos a aplicar a una imagen. Vamos a crear el efecto de opacidad 100% progresivo sobre una imagen con una opacidad del 80% en estado de reposo.

Utilizamos la propiedad “opacity” para controlar el % de opacidad. Y la propiedad “transition” para controlar la velocidad de transición.

.fade{
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.3s linear;
}
.fade:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}

DEMO DESCARGAR

Efecto fade jquery

Jorge Maiden — Sat, 14 Mar 2009 01:47:02 +0000

Vamos a ver un ejemplo sencillo de jquery para hacer un rollover de efecto transparencia en nuestras fotos.

Creamos una nueva función, y aplicamos la función “fadeTo” al 0.3 en estado reposo (30% de opacidad) y al pasar el ratón por encima aplicamos a la foto el 1 (100% de opacidad).

$(document).ready(function () {
$(".fadefoto").fadeTo(1, 0.3);
$(".fadefoto").hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("normal", 0.3);
}
);
});

Y dentro del body de nuestra página, solo tenemos que aplicar el estilo que antes hemos creado para el efecto, en nuestro caso: “fadefoto” a la/s fotos que queremos aplicar el efecto de transparencia.