www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Moving object across the screen continuously

  1. #1
    Join Date
    Feb 2006
    Posts
    90

    Moving object across the screen continuously

    Hi

    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

  2. #2
    Join Date
    Mar 2012
    Posts
    1,505
    Please be specific as to what code you have tried, and the problem(s) you have encountered.

  3. #3
    Join Date
    Oct 2013
    Posts
    484
    Using CSS3 animations:
    HTML Code:
    <!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.

  4. #4
    Join Date
    Feb 2006
    Posts
    90
    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

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Feb 2006
    Posts
    90
    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 !!

  7. #7
    Join Date
    Oct 2013
    Posts
    484
    Quote Originally Posted by mlim View Post
    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.

    Quote Originally Posted by mlim View Post
    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.

  8. #8
    Join Date
    Feb 2006
    Posts
    90
    Kevin2,

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

    Regards

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!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    //(optional) the number of seconds to scroll across the parent DIV. (number, default = 5 seconds)
    });
    
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Feb 2006
    Posts
    90
    vwphillips,

    Another excellent solution!!!

    Thanks

  11. #11
    Join Date
    Jul 2014
    Posts
    6
    Good idea. I have moved it.

  12. #12
    Join Date
    Feb 2006
    Posts
    90
    vwphillips,

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

    God bless you all !

  13. #13
    Join Date
    Feb 2006
    Posts
    90
    vwphillips,

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

    Thanks

  14. #14
    Join Date
    Oct 2013
    Posts
    484
    Quote Originally Posted by mlim View Post
    Is it possible to control the size of the image (width and height) ?
    Just use a larger image.

    Quote Originally Posted by mlim View Post
    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/...lement/marquee

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

  15. #15
    Join Date
    Feb 2006
    Posts
    90
    Kevin2,

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

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles