How to get an image to slide from one side of page to the other with jquery or javascript? Just like on thepiratebay.se

Question

This is something i've been seeing alot in slides or on page when scrolling. Moving images. How can I do this with jquery or some simple javascript just like on thepiratebay.se? My idea was a car sliding from one side of the page to the other.

I know jquery can do this with animate() but I dont see any examples of something sliding across the page like on thepiratebay.se

Can anyone pintoint where they use this technique. I'm not sure what js they are using for this cant find it.

Src: http://thepiratebay.se

Answer 1

JavaScript? This can be done by CSS!

Here have a smooth moving kitty.

Demo

html

<img id="pic" src="tomato"/>

css

#pic {
  -webkit-animation: myfirst 2s;
  animation: myfirst 2s;
  position: absolute;
  right: 80%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
  from {right: 10%;}
  to {right: 80%;}
}

@keyframes myfirst {
  from {right: 10%;}
  to {right: 80%;}
}

Answer 2

Here is a quick example.

CSS:

#b {
position: absolute;
top:50px;
}

HTML

<img id="b" src="example.jpg"/>

Jquery

function moveRight(){
    $("#b").animate({left: "+=300"}, 2000,moveLeft)
}

function moveLeft(){
    $("#b").animate({left: "-=300"}, 2000,moveRight)
}

$(document).ready(function() {

   moveRight();

});

this will move it left to right constantly.