Buenas foreros.
Tengo que crearle una paginilla a mi cuñado y quiero crear un efecto con una foto.
Lo vi en alguna web, y en flash sabria hacerlo, pero prefiriria aprender ha hacerlo en html5.
Solo se trata de cargar dos imagenes, una sobre la otra "la segunda un gif con transparencias", Por ejemplo un fondo y encima una persona. Al pasar el raton por encima se crea como el efecto de profundidad, al mover el raton a la izquierda las imagenes se muevan a la derecha (una mas que la otra), y viceversa.
La teoria la se, lo que necesito saber es si debo crear la imagen dentro del canvas o lo hago sin el canvas.
Despues que seria,¿
imagen.onmouseover{
"aqui saber si el raton se mueve i hacia donde, que encontre algun tutorial"
if("mouse x cambia"){
imagen.x += "nueva posicion segun raton y lo mismo con y"
}
}
?
Aver si me podeis ech r una mano
PD: Busque mucho, pero no encontre como mover la imagen.
Encontre la parte del raton, e intente modificarla:
Código HTML:
Ver originalvar x2;
var y2;
var x;
var y;
function getCursorPosition(e) {
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
// Convert to coordinates relative to the canvas
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
if (x >= x2){ imagen.x+=1; }
//Y lo mismo con los otros movimientos
}
¿Esta bien asi?