Moving object across the screen continuously

This site is best viewed in a modern browser with JavaScript enabled.

Moving object across the screen continuously

mlim

How to Make an image (multiple copies of itself) Moving Continuously across the screen in Javascript.

Please don't use marquee because there is a gap when image exit the screen and re-enter the screen not continously moving.

Thanks

jedaisoul

Please be specific as to what code you have tried, and the problem(s) you have encountered.

Kevin2

Using CSS3 animations:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation</title>
<style>

#A,#B,#C,#D{
	position:absolute;
	left:-5%; /* Set initial position for each image off-screen left -- adjust according to image width */
	animation:mymove 8s infinite;	/* total animation time for each image is 8 seconds, loops forever */
	animation-direction:normal;	
	/* Firefox */
	-moz-animation:mymove 8s infinite;
	-moz-animation-direction:normal;		
	/* Safari, Chrome, and Webkit Opera */
	-webkit-animation:mymove 8s infinite;
	-webkit-animation-direction:normal;	
	/* Presto Opera */
	-o-animation:mymove 8s infinite;
	-o-animation-direction:normal;
}

/* start each image's animation 2 seconds after the previous */
#A{
	animation-delay:0s;
	-webkit-animation-delay: 0s;
}

#B{
	animation-delay:2s;
	-webkit-animation-delay: 2s;
}

#C{
	animation-delay:4s;
	-webkit-animation-delay: 4s;
}

#D{
	animation-delay:6s;
	-webkit-animation-delay: 6s;
}

/* Animation start and stop points */
@keyframes mymove
	{
	from {left:-5%;}	/*off-screen left (adjust for image width)*/
	to {left:100%;}		/*off-screen right*/
	}

@-moz-keyframes mymove /* Firefox */
	{
	from {left:-5%;}
	to {left:100%;}
	}

@-webkit-keyframes mymove /* Safari, Chrome, and Webkit Opera */
	{
	from {left:-5%;}
	to {left:100%;}
	}

@-o-keyframes mymove /* Presto Opera */
	{
	from {left:-5%;}
	to {left:100%;}
	}

</style>

</head>
<body>

<div>
   <img src="A.gif" id="A" alt="A"/>
   <img src="A.gif" id="B" alt="A"/>
   <img src="A.gif" id="C" alt="A"/>
   <img src="A.gif" id="D" alt="A"/>
</div>
</body>
</html>

Some adjustment may be required... See comments in code.

mlim

Kevin2,

Thank for the animation code. This work well in Firefox but not ie ?

The animation slow down at the right of the screen ?

Thanks

vwphillips

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation</title>
<style>

#rotate {
  position:absolute;left:0px;top:100px;width:100%;height:200px;
}

#rotate IMG {
  float:left;
}


</style>

</head>
<body>

<div>

 <div id="rotate" >
  <div>
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
  </div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/

var zxcRotate={

 init:function(o){
  var p=document.getElementById(o.ID),ms=o.Animate,b=p?p.getElementsByTagName('DIV')[0]:null,i=b?b.getElementsByTagName('IMG'):[],bc;
  if (i[0]){
   p.style.overflow='hidden';
   b.style.position='absolute';
   b.style.width='3000px';
   o.bc=b.cloneNode(true);
   o.bc.style.top='0px';
   o.p=p;
   o.lgth=i.length;
   o.b=[b,'left'];
   o.lst=i[o.lgth-1];
   b.appendChild(o.bc);
   o.ms=typeof(ms)=='number'&&ms>0?ms*1000:10000;
   this.rotate(o);
  }
 },

 rotate:function(o){
  var i=o.p.getElementsByTagName('IMG'),sz,z0=0;
  for (;z0<i.length;z0++){
   i[z0].style.marginLeft=(o.p.offsetWidth-i[0].width*o.lgth)/o.lgth+'px';
  }
  sz=o.lst.width+o.lst.offsetLeft;
  o.bc.style.left=sz+'px';
  this.animate(o,o.b,-sz,0,new Date(),o.ms);
 },


 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[0].style[a[1]]=t+'px';
   oop.rotate(o);
  }
 }


}

zxcRotate.init({
 ID:'rotate',
 Animate:10
});

/*]]>*/
</script>
</body>
</html>

mlim

vwphillips,

Excellent work !!!

2 questions here :

1) How to control the speed ?

2) If 9 images are used then they seemed to be overlapping each other ?

Thanks again for your help !!

Kevin2

mlim;1346685 wrote:
This work well in Firefox but not ie ?

Works in IE11. Doesn't work in IE8. I assume the breakpoint is somewhere in between. If supporting IE8- is mission-critical for you then precious little of CSS3 will be useable, including animation, rounded corners, and other goodies.

mlim;1346685 wrote:
The animation slow down at the right of the screen ?

This was actually my first experiment with CSS animations . I assume that's just how it works, but maybe I missed something. Personally I like the effect.

mlim

Kevin2,

I liked your CSS animation, I guess CSS animation is the future...

Regards

vwphillips

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation</title>
<style>

#rotate {
  position:absolute;left:0px;top:100px;width:100%;height:200px;
}

#rotate IMG {
  float:left;width:100px;
}


</style>

</head>
<body>

<div>

 <div id="rotate" >
  <div>
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
  </div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/

var zxcRotate={

 init:function(o){
  var p=document.getElementById(o.ID),ms=o.Animate,b=p?p.getElementsByTagName('DIV')[0]:null,i=b?b.getElementsByTagName('IMG'):[],bc;
  if (i[0]){
   p.style.overflow='hidden';
   b.style.position='absolute';
   b.style.width='3000px';
   o.bc=b.cloneNode(true);
   o.bc.style.top='0px';
   o.p=p;
   o.lgth=i.length;
   o.b=[b,'left'];
   o.lst=i[o.lgth-1];
   b.appendChild(o.bc);
   o.ms=typeof(ms)=='number'&&ms>0?ms*1000:10000;
   this.rotate(o);
  }
 },

 rotate:function(o){
  var i=o.p.getElementsByTagName('IMG'),sz,z0=0;
  for (;z0<i.length;z0++){
   i[z0].style.marginLeft=Math.max((o.p.offsetWidth-i[0].width*o.lgth)/o.lgth,5)+'px';
  }
  sz=o.lst.width+o.lst.offsetLeft;
  o.bc.style.left=sz+'px';
  this.animate(o,o.b,-sz,0,new Date(),o.ms);
 },


 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[0].style[a[1]]=t+'px';
   oop.rotate(o);
  }
 }


}

zxcRotate.init({
 ID:'rotate',  // the the unique ID name of the parent DIV.                        (string)
 Animate:10   [COLOR="#FF0000"] //(optional) the number of seconds to scroll across the parent DIV. (number, default = 5 seconds)[/COLOR]
});

/*]]>*/
</script>
</body>
</html>

mlim

vwphillips,

Another excellent solution!!!

Thanks

zara1200

Good idea. I have moved it.

mlim

vwphillips,

Is it possible to control the size of the image (width and height) ?

God bless you all !

mlim

vwphillips,

Why the "marquee" tag don't have a "no gap" variable ?

Thanks

Kevin2

mlim;1348115 wrote:
Is it possible to control the size of the image (width and height) ?

Just use a larger image.

mlim;1348117 wrote:
Why the "marquee" tag don't have a "no gap" variable ?

Read the following article carefully. <marquee>, if it was ever in a HTML standard, is not now, and probably never will be. Therefore any new "variables"/attributes will never be added.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

You will be far better off using vwphillips' javascript solution or my CSS idea.

mlim

Kevin2,

I did tried with a larger image but it scale down to smaller size ?

Thanks

Kevin2

Make the items in red match your image size:

#rotate {
  position:absolute;left:0px;top:100px;width:100%;height:[B][COLOR="#FF0000"]100[/COLOR][/B]px;
}

#rotate IMG {
  float:left;width:[B][COLOR="#FF0000"]100[/COLOR][/B]px;
}