Text Scroller effect | text scroller

Submit your widget

Home Text & Link EffectsText Scroller effect

Text Scroller effect

Created

13 years ago Views

Views

13662

downloads

3141

Author

nofunc

Text Scroller effect

The further from the center of the scroll bar, the faster the text will scroll. The closer to the center, the slower it will scroll. When you move over the center it pauses.

JAVASCRIPT

function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }
function xy(e,v) { return(v?(browser('msie')?event.clientY+document.body.scrollTop:e.pageY):(browser('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function browser(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }

function box() { IE=navigator.userAgent.indexOf('MSIE')!=-1?true:false;

  h=$('data').offsetHeight; o=parseInt($S('data').top); s=1; ratio=(h/(o+h))*(154/h); hover=false;

  scroll();

}

function scroll() { $S('data').top=(t=(parseInt($S('data').top)-s))+"px";
  
  $S('slide').marginTop=((154-((t+h)*ratio))+5)+'px'; $S('slide').backgroundPosition=hover?'0 9px':'';
  
  if(t<-h) $S('data').top=o+"px"; else if(t>o) $S('data').top=-h+"px";

  setTimeout("scroll()",42);

}

function slip() { function XY(e) { var X=xy(e),Y=xy(e,1);

    if(X>=185 && X<=200 && Y>=13 && Y<=190) { $S('slider').backgroundPosition='0px 173px'; $('data2').firstChild.nodeValue='pause'; hover=true; s=(Y-98)/5; }
    else { $S('slider').backgroundPosition=''; document.onmousemove=function(){}; hover=false; s=(Y>98)?1:-1; }

  }

  document.onmousemove=XY;

}

function flip(sp) { $('data2').firstChild.nodeValue=(sp==0)?'play':'pause'; s=sp; }

function display(v) {

  for(i=0; i<(r=Array("data","search","about")).length; i++) { $S(r[i]+"2").color=(r[i]==v)?'#ddd':'#999'; $S(r[i]).display=(r[i]==v)?'block':'none'; }

  if(v!='data') { flip(0); $S('slider').display='none'; }
  else { flip(s==0?1:0); $S('slider').display='block'; }

}

function search(v) {

  for(i=0; i<(t=$('search').getElementsByTagName('a')).length; i++) t[i].className=(t[i].firstChild.firstChild.nodeValue.toLowerCase()==v)?"s0":"s1";

  document.form.type.value=v;

}

function clearQ(v) { if(v.defaultValue==v.value) v.value=''; }

window.onload=box;

<style type="text/css">

body { BACKGROUND: #888 url(/edit_media/2010/201011/20101127/text_scroll/boxBG.gif) repeat-x; COLOR: #D4D4D4; FONT-FAMILY: Arial; FONT-SIZE: 11.6px; MARGIN: 0; PADDING: 0; TEXT-ALIGN: center; }
h1 { COLOR: #95AFC3; FONT-SIZE: 11.6px; FONT-WEIGHT: 400; MARGIN: 0; POSITION: absolute; TOP: 3px; LEFT: 0; WIDTH: 190px; }
a { COLOR: #999; }

#content { HEIGHT: 145px; LEFT: 5px; OVERFLOW: hidden; POSITION: absolute; TOP: 27px; WIDTH: 176px; }

#about { DISPLAY: none; padding: 19px 5px 0 5px; }
#about a { COLOR: #CF926F; }

#data { COLOR: #ACACAC; LINE-HEIGHT: 1.3em; POSITION: absolute; TOP: 0; LEFT: 0; }

#search input.submit { MARGIN-TOP: 5px; BORDER: 1px solid #333; }
#search input.text { BACKGROUND: #FFF; BORDER: #333 1px solid; COLOR: #677d96; FONT-SIZE: 14px; HEIGHT: 25px; MARGIN-TOP: 4px; PADDING: 2px 3px 0 7px; WIDTH: 160px; }
#search hr { MARGIN: 0; PADDING: 0; }
#search a { PADDING: 0 2px; TEXT-DECORATION: none; }
#search { COLOR: #666; DISPLAY: none; PADDING-TOP: 19px; TEXT-ALIGN: center; }

.s0 span,#search span:hover { COLOR: #DBD2CD; }
.s1 span { COLOR: #CF926F; }

#menu { COLOR: #393939; POSITION: absolute; TOP: 182px; LEFT: 21px; TEXT-ALIGN: left; }
#menu a { MARGIN: 0 4px; TEXT-DECORATION: none; }
#menu a:hover { COLOR: #ddd; }

#slider { BACKGROUND: url(/edit_media/2010/201011/20101127/text_scroll/slider.gif); POSITION: absolute; LEFT: 185px; TOP: 13px; HEIGHT: 173px; WIDTH: 15px; TEXT-ALIGN: left; CURSOR: hand; CURSOR: pointer; }
#slide { HEIGHT: 9px; WIDTH: 9px; BACKGROUND: url(/edit_media/2010/201011/20101127/text_scroll/slide.gif); MARGIN: 5px 0 0 3px; FONT-SIZE: 1px; }

</style>
<body>
<h1>Jingle Bells</h1>
<div id="content">
<div style="TOP: 143px;" id="data" onMouseOver="flip(0)" onMouseOut="flip(1)">
Dashing through the snow<br>
In a one horse open sleigh<br>

O'er the fields we go<br>
Laughing all the way<br>
Bells on bob tails ring<br>
Making spirits bright<br>
What fun it is to laugh and sing<br>
A sleighing song tonight<br>
<br>
Oh, jingle bells, jingle bells<br>
Jingle all the way<br>

Oh, what fun it is to ride<br>
In a one horse open sleigh<br>
Jingle bells, jingle bells<br>
Jingle all the way<br>
Oh, what fun it is to ride<br>
In a one horse open sleigh<br>
<br>
A day or two ago<br>
I thought I'd take a ride<br>

And soon Miss Fanny Bright<br>
Was seated by my side<br>
The horse was lean and lank<br>
Misfortune seemed his lot<br>
We got into a drifted bank<br>
And then we got upsot<br>
<br>
Oh, jingle bells, jingle bells<br>
Jingle all the way<br>

Oh, what fun it is to ride<br>
In a one horse open sleigh<br>
Jingle bells, jingle bells<br>
Jingle all the way<br>
Oh, what fun it is to ride<br>
In a one horse open sleigh yeah<br>
<br>
Jingle bells, jingle bells<br>
Jingle all the way<br>

Oh, what fun it is to ride<br>
In a one horse open sleigh<br>
Jingle bells, jingle bells<br>
Jingle all the way<br>
Oh, what fun it is to ride<br>
In a one horse open sleigh
</div>
</div>
<div id="menu"><a href="[removed]display('data');" id="data2">pause</a></div>
<div id="slider" onMouseOver="slip()"><div id="slide"></div></div>

<script type="text/javascript">

function box() {

   IE=navigator.userAgent.indexOf('MSIE')!=-1?true:false;

   _data=document.getElementById('data'); _data2=document.getElementById('data2'); _slider=document.getElementById('slider'); _slide=document.getElementById('slide');

   h=_data.offsetHeight; o=parseInt(_data.style.top); s=1; ratio=(h/(o+h))*(154/h); hover=false;

   scroll();

}

function scroll() {

   _data.style.top=(t=(parseInt(_data.style.top)-s))+"px";

   _slide.style.marginTop=((154-((t+h)*ratio))+5)+'px';
   _slide.style.backgroundPosition=hover?'0 9px':'';

   if(t<-h) _data.style.top=o+"px";
   if(t>o) _data.style.top=-h+"px";

   setTimeout("scroll()",42);

}

function slip() {

   function XY(e) {

       X=IE?event.clientX+document.body.scrollLeft:e.pageX;
       Y=IE?event.clientY+document.body.scrollTop:e.pageY;

       if(X>=185 && X<=200 && Y>=13 && Y<=190) {

           _slider.style.backgroundPosition='0px 173px';

           _data2.firstChild.nodeValue='pause'; hover=true;

           s=(Y-98)/5;

       }
       else {

           _slider.style.backgroundPosition='';

           document.onmousemove=function(){}; hover=false;

           s=(Y>98)?1:-1;

       }

   }

   document.onmousemove=XY;

}

function flip(sp) {

   if(sp==0) { _data2.firstChild.nodeValue='play'; s=0; }
   else { _data2.firstChild.nodeValue='pause'; s=1; }

}

function display(v) {

   document.getElementById("data2").style.color=("data"==v)?'#ddd':'#999';
   document.getElementById("data").style.display=("data"==v)?'block':'none';

   flip(s==0?1:0); _slider.style.display='block';

}

if(window.addEventListener) window.addEventListener("load",box,false);
else if(window.attachEvent) window.attachEvent("onload",box);
else window.onload=box;

</script>
</body>

Tag: text scroller

You might also like

Newsletter

Recommend Items

Contact | Advertising Information | Terms of use | Hosting on Bluehost © 2010-2024 htmldrive.net