Menu
There are plenty scripts to fade text, or color change text. The easiest one using DOM document.getElementById(“id”).style.color
exemple:
<script language=”JavaScript1.2″>
hex=255 // Initial color value.
function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById(“sample”).style.color=”rgb(“+hex+”,”+hex+”,”+hex+”)”;
setTimeout(“fadetext()”,20);
}
else
hex=255 //reset hex value
}
</script>
<div id=”sample” style=”width:100%”><h3>John slowly faded into view</h3></div>
<button onClick=”fadetext()”>Fade Text</button>
But I want to fade the text one word at the time.
purpuse is to make a webpage fade in one word at the time to help children with reading problems,
Any idea’s..?
[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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Element Animator (16-October-2009) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style of an element over a specified period of time.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:relative;' by the script.
//
// The element would normally be assigned a unique ID name.
//
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcAnimator('left','tst1',20,260,'sin',2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 5 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 2: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 2: Clip start/finish parameters may be defined as 'rect(0 100 100 0)' or '0 100 100 0'.
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
// For color each field is an array storing the R, G, B values.
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 4.5K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
var zxcunits=zxcsrt.toString().replace(/d|-/g,'')||'px';
zxcsrt=zxcNuClipRGB(zxcsrt,zxcmde); zxcfin=zxcNuClipRGB(zxcfin,zxcmde);
if (zxcoop){
if (zxcmde.match('#')&&zxcsrt.compare(zxcoop.srtfin[0])&&zxcfin.compare(zxcoop.srtfin[1])) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0].compare(zxcoop.data[2]))?zxcfin:zxcsrt],zxccurve,zxctime,zxcunits);
else zxcoop.update([zxcsrt,zxcfin],zxccurve,zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcAnimatorOOP(zxcmde.replace(/[-#]/g,''),zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits);
}
function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits){
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='relative';
this.srtfin=[[],[]];
for (var zxc0=0;zxc0<zxcsrt.length;zxc0++){ this.srtfin[0].push(zxcsrt[zxc0]); this.srtfin[1].push(zxcfin[zxc0]); }
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde;
this.std=!(zxcmde.indexOf('olor')>0||zxcmde=='clip'||zxcmde=='opacity');
this.update([zxcsrt,zxcfin],zxccurve,zxctime,zxcunits);
}
zxcAnimatorOOP.prototype.update=function(zxcsrtfin,zxccurve,zxctime,zxcunits){
clearTimeout(this.to);
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
this.units=zxcunits||this.units;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==[0]) zxcsrtfin[zxc0]=[0.00001];
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
var zxcmatch=zxcsrtfin[0].toString();
this.data=[[],zxcsrtfin[0],zxcsrtfin[1]];
for (var zxc0 in this.data[1]) this.data[0][zxc0]=(this.data[1][zxc0]);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cng();
}
zxcAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.data[2]){
this.data[0][zxc0]=(this.curve=='s')?Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.sin(this.inc*zxcms)+this.data[1][zxc0]):(this.curve=='c')?(this.data[2][0])-Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.cos(this.inc*zxcms)):(this.data[2][zxc0]-this.data[1][zxc0])/this.time*zxcms+this.data[1][zxc0];
if (this.mde!='left'&&this.mde!='top'&&this.data[0][zxc0]<0) this.data[0][zxc0]=0;
}
this.cngstyle();
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else { this.data[0]=this.data[2]; this.cngstyle(this.data[0]); }
}
zxcAnimatorOOP.prototype.cngstyle=function(){
var zxcv=this.data[0];
if (this.std) this.obj.style[this.mde]=zxcv[0]+this.units;
else if (this.mde.indexOf('olor')>0) this.obj.style[this.mde]='rgb('+zxcv[0]+','+zxcv[1]+','+zxcv[2]+')';
else if (this.mde=='clip') this.obj.style[this.mde]='rect('+zxcv[0]+' '+zxcv[1]+' '+zxcv[2]+' '+zxcv[3]+')';
else if (this.mde=='opacity')this.opacity(zxcv[0]);
}
zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcNuClipRGB(zxccol,zxcmde){
if (typeof(zxccol)=='object') return zxccol;
if (zxcmde=='clip') return zxccol.replace(/[rect()]/g,'').split(' ');
if (!zxccol.toString().match('#')) return [parseInt(zxccol)];
zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16);
zxccol=zxccol.replace(/[rgb()s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}
Array.prototype.compare=function(zxcary){
for (var zxc0=0;zxc0<this.length;zxc0++){ if (this[zxc0]!=zxcary[zxc0]) return false; }
return true;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function fadetext(zxcid,zxcsrt,zxcfin,zxcspd){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.ary){
zxcobj.ary=[];
var zxcfcld=zxcobj.firstChild;
var zxctxt=zxcfcld.data.split(/W+/g);
zxcobj.removeChild(zxcfcld);
for (var zxc0=0;zxc0<zxctxt.length;zxc0++){
zxcobj.ary.push(zxcES('SPAN',{},zxcobj,' '+zxctxt[zxc0]));
}
}
if (!zxcobj.runing){
zxcobj.runing=true;
for (var zxc0=0;zxc0<zxcobj.ary.length;zxc0++){
clearTimeout(zxcobj.ary[zxc0].to);
zxcobj.ary[zxc0].to=setTimeout(function(zxcoop){return function(){zxcAnimator('color#',zxcoop,(zxcsrt||'#FFFFFF'),(zxcfin||'#00000'),false,(zxcspd||1000))}}(zxcobj.ary[zxc0]),(zxcspd||1000)*zxc0+10);
}
setTimeout(function(){ zxcobj.runing=false; },(zxcspd||1000)*zxcobj.ary.length);
}
}
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}
/*]]>*/
</script></head>
<body>
http://www.webdeveloper.com/forum/showthread.php?t=193657<div id="sample" style="width:100%;font-Size:18px;font-Weight:bold;color:#FFFFFF;"> John slowly faded into view</div>
<button onClick="fadetext('sample','#FFFFFF','#00000',1000)">Fade Text</button>
</body>
</html>[/CODE][CODE]function fadetext(zxcid,zxcsrt,zxcfin,zxcspd){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.ary){
zxcobj.ary=[];
var zxcfcld=zxcobj.firstChild;
var zxctxt=zxcfcld.data.split(/s+/g);
zxcobj.removeChild(zxcfcld);
for (var zxc0=0;zxc0<zxctxt.length;zxc0++){
zxcobj.ary.push(zxcES('SPAN',{},zxcobj,' '+zxctxt[zxc0]));
}
}
if (!zxcobj.runing){
zxcobj.runing=true;
for (var zxc0=0;zxc0<zxcobj.ary.length;zxc0++){
clearTimeout(zxcobj.ary[zxc0].to);
zxcobj.ary[zxc0].to=setTimeout(function(zxcoop){return function(){zxcAnimator('color#',zxcoop,(zxcsrt||'#FFFFFF'),(zxcfin||'#00000'),false,(zxcspd||1000))}}(zxcobj.ary[zxc0]),(zxcspd||1000)*zxc0+10);
}
setTimeout(function(){ zxcobj.runing=false; },(zxcspd||1000)*zxcobj.ary.length);
}
}
[/CODE]Also the script stop when HTML code is used ?
[/QUOTE]
[CODE]<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function fadetext(zxcid,zxcsrt,zxcfin,zxcspd){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.ary){
zxcWords(zxcobj);
var zxcfades=zxcobj.getElementsByTagName('A');
zxcobj.ary=[];
for (var zxc0=0;zxc0<zxcfades.length;zxc0++){
if (zxcfades[zxc0].fade) zxcobj.ary.push(zxcfades[zxc0]);
}
}
if (!zxcobj.runing){
zxcobj.runing=true;
for (var zxc0=0;zxc0<zxcobj.ary.length;zxc0++){
clearTimeout(zxcobj.ary[zxc0].to);
zxcobj.ary[zxc0].to=setTimeout(function(zxcoop){return function(){zxcAnimator('color#',zxcoop,(zxcsrt||'#FFFFFF'),(zxcfin||'#00000'),false,(zxcspd||1000))}}(zxcobj.ary[zxc0]),(zxcspd||1000)*zxc0+10);
}
setTimeout(function(){ zxcobj.runing=false; },(zxcspd||1000)*zxcobj.ary.length);
}
}
function zxcWords(zxcn){
var zxcnu=zxcn.childNodes.length;
for(var zxc0=0;zxc0<zxcnu;zxc0++) {
var zxctxt=zxcn.firstChild.data;
var zxcrn=zxcn.removeChild(zxcn.firstChild);
if(zxcrn.nodeType==3){
var zxcs=zxctxt.split(' ');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
var zxcnn=document.createElement('A');
zxcnn.fade=true;
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
zxcn.appendChild(zxcnn);
}
}
else {
zxcWords(zxcrn);
zxcn.appendChild(zxcrn);
}
}
}
/*]]>*/
</script>[/CODE]0.1.9 — BETA 5.18