Sorry!
I like the the original effect, but it can be done a bit slowly?
Printable View
Sorry!
I like the the original effect, but it can be done a bit slowly?
Code:
var scrollspeed=cache=.5;
it works, tks
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>