How do I make an image move when i scroll down?

Here is an example of what i want to achieve: http://ift.tt/2ugmHVu

I have tried to change the css properties of images but that effect does not satisfy my needs. I have tried the following code:

  mydocument.on('scroll',function() {
        if (mydocument.scrollTop() > 10 && mydocument.scrollTop() < 200 ) {
           $('#first').css('top', '320px');
           $('#first').css('left', '215px');
           $('#first').css('transition', '0.5s');
        } 
        else {
           $('#first').css('top', '300px');
           $('#first').css('left', '200px');
           $('#first').css('transition', '0.5s');
        }
  }
 ); 

This is supposed to move an image when you scroll between 10 and 200 px.