IFRAME Scroller - Horizontal Scrolling

**lupstick** · 07-27-2011, 02:51 PM

Sorry!
I like the the original effect, but it can be done a bit slowly?

**vwphillips** · 07-27-2011, 03:28 PM

Code:

var scrollspeed=cache=.5;

**lupstick** · 07-27-2011, 06:38 PM

it works, tks

**vwphillips** · 07-28-2011, 06:43 AM

a more modern version with a cosistant scroll speed across browsers

Code:

 
<html>
<head>
<style type="text/css">
/*<![CDATA[*/
#datacontainer {
 position:relative;left:701px;top:0px;
}

.scroll {
 position:absolute;left:0px;top:0px;width:20000px;background-Color:#FFFFCC;
}

/*]]>*/
</style>

</head>

<body>

<div class="scroll" onmouseover="S.Pause()" onmouseout="S.Scroll();" >

<div id="datacontainer" >


<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

  <a>Along line of text Along line of text</a>

<!-- END SCROLLER CONTENT -->
</div>
</div>
<script type="text/javascript">


//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500;
// the duration of one scroll in milli seconds
var scrollduration=20000;


function initializeScroller(){
 var oop=this,obj=document.getElementById("datacontainer");
 obj.style.width='20000px';
 this.obj=obj;
 this.min=-obj.getElementsByTagName('A')[0].offsetWidth;
 this.max=obj.offsetLeft;
 this.now=this.max;
 this.ms=scrollduration;
 this.inc=Math.PI/(2*this.ms);
 setTimeout(function(){ oop.scroll(); }, initialdelay);
}

initializeScroller.prototype={

 Scroll:function(){
  var oop=this;
  this.dly=setTimeout(function(){ oop.scroll(); },200);
 },

 Pause:function(){
  clearTimeout(this.dly);
 },

 scroll:function(){
  clearTimeout(this.dly);
  this.mS=this.ms*Math.abs((this.min-this.now)/(this.max-this.min));
  this.animate('left',new Date(),this.now,this.min);
 },

 animate:function(mde,srt,f,t,sc){
  var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
  this.now=Math.max(now,f<0||t<0?now:0);
  this.obj.style[mde]=this.now+'px';
  if (ms<this.mS){
   this.dly=setTimeout(function(){ oop.animate(mde,srt,f,t,sc); },10);
  }
  else {
   this.now=this.max;
   this.scroll();
  }
 }

}

S=new initializeScroller()

</script>

</body>
</html>

Thread: IFRAME Scroller - Horizontal Scrolling

Thread Tools

Search Thread

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions