Logo

Si queremos darle un toque elegante a nuestra web hay un truquito con JQuery que siempre queda bien. Es cambiar una imagen por otra al pasar el ratón por encima con un efecto que hace que parezca que esta girando y que por detrás sale otra (Flip Effect).

Para empezar, debes cargar las librerías de Jquery en vuestra web. Puedes hacerlo descargando dichas librerías en tu proyecto web o bien cargándolas directamente desde Google con este sencillo código que debes insertar en tu web.


Ahora necesitaremos dos imágenes, una que estará visible al cargar la web y otra que aparecerá al girar la imagen anterior. Es importante que ambas tengan el mismo tamaño para que el efecto sea completo y correcto. Debéis insertarlas en vuestro HTML de la siguiente manera:


Posteriormente debéis insertar este código en tu hoja de estilo

/* --------------------- FLIP ---------------------- */
		.flip{
			position:absolute;
			width: [ancho de la imagen]px;
			height: [alto de la imagen]px;
		}

y este código en un archivo .js de vuestro proyecto.

/* Girar foto */
$(document).ready(function () {
	//Giramos imagenes
	var margin =$("#imagefront").width()/2;
	var width=$("#imagefront").width();
	var height=$("#imagefront").height();

	$("#imageback").stop().css({width:'0px',height:''+height+'px',
marginLeft:''+margin+'px',opacity:'0.5'});
	$("#imagefront").mouseenter(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',
marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#imageback").stop().animate({width:''+width+'px',height:
''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});
	$("#imageback").mouseenter(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',
marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#imagefront").stop().animate({width:''+width+'px',height:
''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

});

Si tienes alguna duda déjanosla en un comentario y trataremos de solucionártela lo antes posible. Este efecto es una versión reducida y más simple del código de webmuch.com donde podréis sacar otros efectos interesantes.

¿Os ha servido este truco para el flip effect?

Comparte:

Suscríbete a la newsletter y recibe cada semana los contenidos en tu email

woko creativos, S.L., como responsable del tratamiento, le informa que sus datos son recabados con la finalidad de: Recoger los datos de carácter personal que sean obtenidos a través de los formularios de contacto disponibles en la página web de la empresa para el contacto con el solicitante. La base jurídica para el tratamiento es el consentimiento del interesado. Sus datos no se cederán a terceros salvo obligación legal. Cualquier persona tiene derecho a solicitar el acceso, rectificación, supresión, limitación del tratamiento, oposición o derecho a la portabilidad de sus datos personales, escribiéndonos a la dirección de nuestras oficinas, (Plaza Ibaiondo, 4 -2º oficina 210. 48940-Leioa (Bizkaia)), indicando el derecho que desea ejercer o enviando un correo a: info@woko.agency Puede obtener información adicional en nuestra página web.

Contenidos relacionados