¿Cómo girar una foto y que aparezca otra por detrás (flip effect)?

Escrito por

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). Si no os aclaráis con la descripción, aquí tenéis el ejemplo práctico del efecto de giro de imágenes.

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);
	});

});

Aquí tenéis el ejemplo funcional del giro de imágenes como guía. 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?

Opinión de los usuarios:

¿Te ha gustado el artículo?

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


Contenidos relacionados

Cómo lograr la victoria en el marketing deportivo

Marketing y ventas Escrito por
Cómo lograr la victoria en el marketing deportivo
Cómo lograr la victoria en el marketing deportivo

El deporte es pasión, competición, emoción… un campo en el que el marketing tiene que trabajar con esos factores y, a la vez, cumplir con sus funciones, estrategias y resultados. Te acercamos a algunas de las herramientas y posibilidades que ofrece el marketing deportivo

Seguir leyendo