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[*/
.test {
width:300px;height:100px;background-Color:#FFFFCC;color:#000000;font-Size:20px;padding:5px
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Next" onclick="zxcTextColor.Next('text1',1);" />
<input type="button" name="" value="Back" onclick="zxcTextColor.Next('text1',-1);" />
<input type="button" name="" value="GoTo 0" onclick="zxcTextColor.GoTo('text1',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcTextColor.GoTo('text1',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcTextColor.GoTo('text1',2);" />
<input type="button" name="" value="GoTo 3" onclick="zxcTextColor.GoTo('text1',3);" />
<div id="text1" class="test" onmouseover="zxcTextColor.Pause('text1');" onmouseout="zxcTextColor.Auto('text1');" >
<span></span>
<br />
<span style="float:right;"></span>
</div>
<br />
<br />
<div id="text2" class="test" onmouseover="zxcTextColor.Pause('text2');" onmouseout="zxcTextColor.Auto('text2');" >
<span></span>
<br />
<span style="float:right;"></span>
</div>
<script type="text/javascript" >
/*<![CDATA[*/
// Text Color Fader (10-October-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/
var zxcTextColor={
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);
o.txt[n]&&n!=o.n?this.rotate(o,n):null;
}
},
Auto:function(id,h){
var oop=this,o=oop['zxc'+id];
o?o.to=setTimeout(function(){ oop.rotate(o,true); },h||200):null;
},
Pause:function(id,h){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
Init:function(o){
var id=o.ParentID,txt=o.Text,f=this.rgb(o.From),t=this.rgb(o.To),mso=o.AnimateOut,msi=o.AnimateIn,fi=o.FadeInHold,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),sp=p.getElementsByTagName('SPAN'),i=0;
if (p&&txt instanceof Array&&sp[0]){
o.id=id;
o.a=[p,f&&t?'color':'',f&&t?f:[100],f&&t?t:[0]];
o.txt=txt;
o.l=txt.length-1;
o.mso=typeof(mso)=='number'&&mso>20?mso:1000;
o.msi=typeof(msi)=='number'&&msi>20?msi:o.mso;
o.h=typeof(h)=='number'&&h>100?h:o.msi*4;
o.fi=typeof(fi)=='number'&&fi>5?fi:5;
o.s=sp;
o.n=0;
o.ud=1;
for (;i<o.s.length;i++){
if (o.txt[0][i]){
o.s[i].innerHTML=o.txt[0][i];
}
}
f&&t?this.col(p,f):this.opc(p,100);
this['zxc'+id]=o;
typeof(s)=='number'&&s>20?this.Auto(id,s):null;
}
},
rotate:function(o,a){
this.Pause(o.id);
clearTimeout(o.fito);
o.auto=a===true;
o.n=o.auto?o.n+o.ud:a;
o.n=o.n<0?o.l:o.n>o.l?0:o.n;
this.animate(o,o.a,o.a[2],o.a[3],new Date(),o.mso);
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=[],i=0;
for (;i<f.length;i++){
n[i]=(t[i]-f[i])/mS*ms+f[i];
n[i]=isFinite(n[i])?Math.round(n[i]):f[i];
}
a[1]?oop.col(a[0],n):oop.opc(a[0],n[0]);
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
if (f==a[2]){
for (i=0;i<o.s.length;i++){
if (o.txt[o.n][i]){
o.s[i].innerHTML=o.txt[o.n][i];
}
}
o.fito=setTimeout(function(){ oop.animate(o,o.a,o.a[3],o.a[2],new Date(),o.msi); },o.auto?o.fi:5);
}
else {
a[1]?oop.col(a[0],t):oop.opc(a[0],t[0]);
o.auto?oop.Auto(o.id,o.h):null;
}
}
},
col:function(o,n){
o.style.color='rgb('+n[0]+','+n[1]+','+n[2]+')';
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
rgb:function(c){
return typeof(c)=='string'&&c.length==7?[parseInt(c.substring(1,3),16),parseInt(c.substring(3,5),16),parseInt(c.substring(5,7),16)]:false;
}
}
zxcTextColor.Init({
ParentID:'text1', // the unique ID name of the parent DIV. (string)
Text:[ // an array to statements to display. (array)
["Things do not happen. Things are made to happen.","John F. Kennedy"],
["If in doubt, leave it out.","NBS"],
["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
],
From:'#000000', //(optional) the fade in HEX color. (string, default = opacity = fade)
To:'#FFFFCC', //(optional) the fade out HEX color. (string, default = opacity = fade)
AnimateOut:2000, //(optional) the fade out duration in milliseconds. (number, default = 1000)
AnimateIn:500, //(optional) the fade in duration in milliseconds. (number, default = AnimateOut)
FadeInHold:5000, //(optional) the delay before fade in in milliseconds. (number, default = 5
AutoHold:2000, //(optional) the auto 'hold' delay in milliseconds. (number, default = AnimateIn*4)
AutoStart:2000 //(optional) the auto start delay in milliseconds. (number, default = no auto start)
});
zxcTextColor.Init({
ParentID:'text2', // the unique ID name of the parent DIV. (string)
Text:[ // an array to statements to display. (array)
["Things do not happen. Things are made to happen.","John F. Kennedy"],
["If in doubt, leave it out.","NBS"],
["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
],
AnimateOut:1000, //(optional) the animation duration in milliseconds. (number, default = 1000)
AutoHold:2000, //(optional) the auto 'hold' delay in milliseconds. (number, default = Animate*4)
AutoStart:2000 //(optional) the auto start delay in milliseconds. (number, default = no auto start)
});
/*]]>*/
</script>
</body>
</html>
Integrating a text fade script with a text display script
Reply With Quote
Bookmarks