verticle reel scroll

**straygrey** · 09-26-2011, 01:48 PM

I already have HTML/CSS/Javascript scrolling individual numbers/images at http://www.k9t.za.net/odometer/index.html.
I now have a requirement to vertically smoothly a reel of numbers. I have the reel of numbers in an image but how to do it smoothly?
Please see http://www.k9t.za.net/odo/index.html to see what I have achieved so far.

**vwphillips** · 09-28-2011, 12:11 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;overflow:hidden;width:350px;height:100px;
}

#tst IMG {
  position:relative;width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>

<div id="tst" >
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (28-September-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
 var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,img,srcary=o.ImageArray,z2=0,cnt=[],ms=o.SlideDuration;
 for (;z0<els.length;z0++){
  if(reg.test(els[z0].className)){
   ary.push(els[z0]);
  }
 }
 this.f=ary[0].height;
  cnt=1;
 this.cnt=[]
 for (;z1<ary.length;z1++){
  img=ary[z1].cloneNode(true);
  img.style.position='absolute';
  img.style.left=ary[z1].offsetLeft+'px';
  img.style.top=ary[z1].height+'px';
  el.appendChild(img);
  ary[z1]=new zxcOdometerSlide(img,ary[z1],typeof(ms)=='number'?ms:500);
  this.cnt.push(cnt);
  cnt*=10;
 }
 ary=ary.reverse();
 for (;z2<srcary.length;z2++){
  img=new Image();
  img.src=srcary[z2];
  srcary[z2]=img;
 }
 this.ary=ary;
 this.srcary=srcary;
 this.nu=1;
}

zxcOdometer.prototype.Count=function(){
  var z0=0,ary=this.ary;
  for (;z0<ary.length;z0++){
   if (this.nu%this.cnt[z0]==0||z0==0){
    ary[z0].cnt=++ary[z0].cnt%10;
    ary[z0].obj.src=this.srcary[ary[z0].cnt].src;
    ary[z0].animate('top',this.f,0,new Date());
   }
  }
  this.nu++;
 }


function zxcOdometerSlide(obj,img,ms){
 this.obj=obj;
 this.img=img;
 this.ms=ms;
 this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
  var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.obj.style[mde]=now+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
  }
  else {
   this.img.src=this.obj.src;
  }
 }



M1=new zxcOdometer({
 ID:'tst',            // the unique ID name of the parent DIV element. (string)
 CommonClass:'digit', // the common class name of the images.          (string)
 ImageArray:[         // the file path and name of the images.         (array)
  'http://www.vicsjavascripts.org.uk/StdImages/Zero.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Five.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Six.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Seven.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Eight.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Nine.gif'
 ],
 SlideDuration:200    //(optional) the slide duration in milli seconds.  (number, default = 500)
});

setInterval(function(){ M1.Count(); },600);
/*]]>*/
</script>
</body>

</html>

**straygrey** · 09-28-2011, 02:18 PM

Thank you but unfortunately, as I said, the requirement is to vertically smoothly scroll a reel of numbers.
I already have individual numbers scrolling at http://www.k9t.za.net/odometer/index.html but now look at http://www.k9t.za.net/odo/index.html where I am attempting to scroll a reel of numbers..

**vwphillips** · 10-01-2011, 12:00 PM

my script adds an aninator to each digit which is what I thought you wanted

I can help much more until I am back from holiday at the end of next week

**straygrey** · 10-01-2011, 12:35 PM

Thanks for that but I wanted to animate a reel of numbers not individual numbers.

**vwphillips** · 10-09-2011, 01:17 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;overflow:hidden;top:300px;width:350px;height:100px;
}

#tst IMG {
  position:relative;width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
 <img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (09-October-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
 var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,img,srcary=o.ImageArray,z2=0,ms=o.SlideDuration;
 for (;z0<els.length;z0++){
  if(reg.test(els[z0].className)){
   ary.push([els[z0],els[z0].offsetLeft]);
  }
 }
 this.f=ary[0][0].height;
 for (;z1<ary.length;z1++){
  img=ary[z1][0].cloneNode(true);
  img.style.position='absolute';
  img.style.left=ary[z1][1]+'px';
  img.style.top=ary[z1][0].height+'px';
  el.appendChild(img);
  ary[z1][0].style.position='absolute';
  ary[z1][0].style.left=ary[z1][1]+'px';
  ary[z1][0].style.top='0px';
  ary[z1]=new zxcOdometerSlide(img,ary[z1][0],typeof(ms)=='number'?ms:500);
 }
 ary=ary.reverse();
 for (;z2<srcary.length;z2++){
  img=new Image();
  img.src=srcary[z2];
  srcary[z2]=img;
 }
 this.ary=ary;
 this.srcary=srcary;
 this.nu=1;
}

zxcOdometer.prototype.Count=function(){
  var z0=0,ary=this.ary,cnt=1;
  for (;z0<ary.length;z0++){
   if (this.nu%cnt==0||z0==0){
    ary[z0].img.src=this.srcary[ary[z0].cnt].src;
    ary[z0].cnt=++ary[z0].cnt%10;
    ary[z0].obj.src=this.srcary[ary[z0].cnt].src;
    ary[z0].animate('top',this.f,0,new Date());
   }
   cnt*=10;
  }
  this.nu++;
 }


function zxcOdometerSlide(obj,img,ms){
 this.obj=obj;
 this.img=img;
 this.ms=ms;
 this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
  var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.obj.style[mde]=now+'px';
   this.img.style[mde]=now-f+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
  }
 }



M1=new zxcOdometer({
 ID:'tst',            // the unique ID name of the parent DIV element. (string)
 CommonClass:'digit', // the common class name of the images.          (string)
 ImageArray:[         // the file path and name of the images.         (array)
  'http://www.vicsjavascripts.org.uk/StdImages/Zero.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Five.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Six.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Seven.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Eight.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/Nine.gif'
 ],
 SlideDuration:200    //(optional) the slide duration in milli seconds.  (number, default = 500)
});


setInterval(function(){ M1.Count(); },600);

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

</html>

**straygrey** · 10-09-2011, 03:28 PM

Again thank you but I still see individual images rather than reel of numbers.

**vwphillips** · 10-10-2011, 08:13 AM

I do not understand what you mean by a 'reel'

**straygrey** · 10-10-2011, 08:36 AM

Please see the attached/inserted for the reel I am speaking of.

I have also email it to you.

**vwphillips** · 10-10-2011, 11:48 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;left:300px;top:300px;width:350px;height:100px;border:solid red 1px;
}

#tst IMG {
  position:relative;width:80px;height:1000px;
}


/*]]>*/
</style></head>

<body>

 <div id="tst" >
  <img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
 </div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (09-October-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
 var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,obj,ms=o.SlideDuration;
 for (;z0<els.length;z0++){
  if(reg.test(els[z0].className)){
   ary.push([els[z0],els[z0].offsetLeft]);
  }
 }
 this.mve=ary[0][0].height/10;
 for (;z1<ary.length;z1++){
  obj=document.createElement('DIV');
  img=ary[z1][0].cloneNode(true);
  obj.style.position='absolute';
  obj.style.left=ary[z1][1]+'px';
  obj.style.top='0px';
  obj.style.width='0px';
  el.appendChild(obj);
  obj.appendChild(ary[z1][0]);
  obj.appendChild(ary[z1][0].cloneNode(true));
  ary[z1]=new zxcOdometerSlide(obj,typeof(ms)=='number'?ms:500);
 }
 ary=ary.reverse();
 this.ary=ary;
 this.nu=1;
}

zxcOdometer.prototype.Count=function(){
  var z0=0,ary=this.ary,cnt=1;
  for (;z0<ary.length;z0++){
   if (this.nu%cnt==0||z0==0){
    ary[z0].cnt++;
    if (ary[z0].cnt==11){
     ary[z0].cnt=1;
     ary[z0].now=0;
    }
    clearTimeout(ary[z0].dly);
    ary[z0].animate('top',ary[z0].now,-this.mve*ary[z0].cnt,new Date());
   }
   cnt*=10;
  }
  this.nu++;
 }


function zxcOdometerSlide(obj,ms){
 this.obj=obj;
 this.ms=ms;
 this.now=0;
 this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
  var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.obj.style[mde]=now+'px';
   this.now=now;
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
  }
  else {
   this.now=t;
  }
 }



M1=new zxcOdometer({
 ID:'tst',            // the unique ID name of the parent DIV element. (string)
 CommonClass:'digit', // the common class name of the images.          (string)
 SlideDuration:200    //(optional) the slide duration in milli seconds.  (number, default = 500)
});


setInterval(function(){ M1.Count(); },600);

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

</html>

Thread: verticle reel scroll

Thread Tools

Search Thread

verticle reel scroll

Bookmarks

Bookmarks

Posting Permissions