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?
