title: Moving an image from A to B with JavaScript
body: <p>Its my first time here and I don't know how to indent this sorry :/</p>
  
  <p>I have an image of a van and I am trying to move it across the screen to as if it is driving.
  Once that is done I will scale the image to appear as if it is moving away (and getting smaller).</p>
  
  <p>I need this to be done in standard javascript without any packages (such as JQuery) please.</p>
  
  <p>What I've got is a van which for a reason I can't break down is moving along 2 paths instead of one. Also moving in the wrong direction (it should move along the path y=-25x so that every 25 pixels moved to the right it should move 1 pixel upwards).</p>
  
  <p>To illustrate what I am trying to achieve, please see this image:
  <a href="http://i.stack.imgur.com/9WIfr.jpg" rel="nofollow">http://i.stack.imgur.com/9WIfr.jpg</a></p>
  
  <p>This is my javascript file:</p>
  
  <pre><code>var viewWidth = 800;        
  var viewHeight = 480;        
  var fps = 30;        
  var delay = getFrame(fps);        
  var vanWidth, vanHeight, vanObj;   
  
  function initVan() {        
    vanObj = document.getElementById("van");        
    vanObj.style.position = "absolute";        
    vanObj.src = "pics/delivery/van.png";        
    vanWidth = 413;        
    vanHeight = 241;        
    var startX = 0-vanWidth;        
    var startY = viewHeight-vanHeight;        
    setPosition(startX,startY);        
    transition(startX,startY,3000);        
  }
  
  function transition(startX,startY,time) {        
    //the intention of this is to follow a path y=-25x in mathematical terms
    var endX = viewWidth;        
    var endY = startY-(endX/-25);        
    //note that this is the velocity per millisecond
    var velocityX = (endX-startX)/time;        
    var velocityY = (endY-startY)/time;        
    alert(endY+", "+startY);        
    move(velocityX,velocityY,endX,endY);        
  }
  
  function move(vX,vY,eX,eY) {        
    var posX = getX();        
    var posY = getY();        
    if (posX&lt;=eX || posY&lt;=eY) {        
      //velocityX (in milliseconds) * delay = the amount of pixels moved in one frame @fps=30
      var moveX = vX*delay;        
      var moveY = vY*delay;        
      var newX = posX+moveX;        
      var newY = posY+moveY;        
      setPosition(newX,newY);        
      setTimeout(function() {        
          move(vX,vY,eX,eY);        
      }, delay);        
    }        
  } 
  
  
  function getX() {        
    return vanObj.offsetLeft;        
  }    
  
  function getY() {        
    return vanObj.offsetTop;        
  }  
  
  function setPosition(newX,newY) {        
    vanObj.style.left = newY + "px";        
    vanObj.style.top = newX + "px";        
  }        
  
  function setSize(scaleX,scaleY) {        
    vanWidth *= scaleX;        
    vanHeight *= scaleY;        
    vanObj.width = vanWidth;        
    vanObj.height = vanHeight;        
  }      
  
  function getFrame(fps) {        
    return Math.floor(1000/fps);        
  }  
  </code></pre>
  
  <p>This is my HTML file:</p>
  
  <p><code>&lt;script type="text/javascript" src="delivery.js"&gt; &lt;/script&gt;<br>
  &lt;body onLoad="initVan();"&gt;<br>
  &lt;img id="van" width=413 height=241/&gt;</code></p>