How to make pictures move or give a continuous motion on websites?

Question

How can i use my images of same width and height to continuously move on the screen from left to right or right to left. Like on this page - https://www.reddit.com/r/Nisekoi/

Answer 1

HTML:

 <img scr="myimage" id="theImage">

JavaScript:

 var image = document.getElementById("theImage");
 var imageLeft = 0;
 function move(){
     imageLeft++;
     image.style.left = imageLeft + "px";

 }
 setInterval(move, 0);

Should Work. You're Welcome.

Answer 2

link for marquee example.

<marquee>Default scrolling</marquee>

you can give as many images you want in place of "Default scrolling" text

Answer 3

You can use either Marquee/css key frames/Javascript implementations for this. But the easiest way is to use marquee or css

<img class='marquee' src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>

css

.marquee { 
  overflow: hidden;
  position: relative;
  animation: MarqueeLeft linear 18s infinite;
}

@keyframes MarqueeLeft 
{
  0% { right: -100% }
  100% { right: 100% }
}

and with marquee

<marquee direction="left">
    <img  src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>
 </marquee>

Check the fiddle http://jsfiddle.net/tintucraju/g9t0e3jf/1/