Move An Image Across A Web Page

How can I move an image element across a page? As an example, Vimeo does this with an image of a cloud: http://www.vimeo.com/log_in

Solution 1:

Place an absolutely-positioned image on your page with a style that looks like:

style="position: fixed; top: 40%; right: 0px;

Then, using a window timer, increase the right style attribute every 50 milliseconds. So 100 milliseconds in, the same style looks like this:

style="position: fixed; top: 40%; right: 2px;

You have to make sure the background of the cloud is transparent as well so that it can "float across" stuff that is "behind it"

Here's the exact image they use: http://www.vimeo.com/assets/images/land_cloud.png You can't see anything because it's a white cloud with a transparent background. Use "Save As" on your browser to download it.

Solution 2:

They're just changing the position with JavaScript.

You can do this yourself easily with jQuery .animate().

Solution 3:

The code:

function cloud () { 
  var cloud = new Element('img', {
    'src':'/assets/images/land_cloud.png',
    'styles': {
      'position':'fixed',
      'top':'40%',
      'right':'40px'
    }
  }).inject(document.body);

  var cloud_style = (function () {
    var right = this.getStyle('right');
    right = right.substr(0,right.indexOf('px'));
    this.setStyle('right', right.toInt()+1+'px');
  });

  cloud_style.periodical('100',cloud);
}

Solution 4:

You could do it with css3 animation. Or you could do it with plain ol' Javascript:

Call SetInterval( ) with an appropriate value for the interval; then, in the interval-timeout handler, change the x-origin of the cloud image to move the thing left or right. Set up the z-index of the cloud and the hill so that the cloud is hidden by the hill.