[SOLUCIONADO] Animación JavaScript

Wizerol · #1 (**permalink**) 09/12/2014, 08:01

Hola, me gustaria saber como mover un div a las coordenadas X Y y a la velocidad que el usuario elija. Como es posible? Solo tengo la estructura html.

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animación</title>
</head>
<body>
   
   <div id="img"><img src="IMAGEN"</div>

<form id="xyv">
        X<input type="text" id="X"><br>
        Y<input type="text" id="Y"><br>
        V<input type="text" id="V"><br>
        <input type="button" value="Start">
    </form>
    
</body>
</html>

PHPeros · #2 (**permalink**) 09/12/2014, 10:11

Se puede hacer con JavaScript, aunque también se podría hacer empleando únicamente las animaciones de CSS con @keyframes.

javi9213 · #3 (**permalink**) 09/12/2014, 10:11

Buenas, prueba con la propiedad de CSS: transform: translate(X, Y);
Donde X e Y son los pixeles que quieras que se mueva.

[URL="http://www.w3schools.com/cssref/css3_pr_transform.asp"]http://www.w3schools.com/cssref/css3_pr_transform.asp[/URL]

Carlangueitor · #4 (**permalink**) 09/12/2014, 17:16

Yo he usado http://greensock.com/gsap muy sencillo de manejear.