PDA

View Full Version : fade out fading scroller



mannkumar
08-12-2010, 11:41 AM
1) Script Title: Fading scroller

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex2/fadescroll.htm

3) Describe problem:

fading scroller is fantastic (great works, thanks!)

however, does anyone know if its possible to amend code so that it fades out the text to match the fade in ?

vwphillips
08-12-2010, 12:54 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">

/***********************************************
* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

// Modified By:
// Vic Phillips (12-August-2010)
// http://www.vicsjavascripts.org.uk/

// for
// color 'in' and color 'out'
// multiple applications on a page


function CngColor(o){
this.obj=document.getElementById(o.ID);
this.ary=o.content;
this.colors=[o.startcolor,o.endcolor];
this.hold=o.hold||3000;
this.ms=o.duration||this.hold/2;
this.maxsteps=o.maxsteps||this.ms/20;
this.fadelinks=o.fadelinks||false;
this.reversefade=o.reversefade?2:1;
this.cnt=0;
this.changecontent();
}

CngColor.prototype={

/*Rafael Raposo edited function*/
//function to change content
changecontent:function(){
this.obj.innerHTML=this.ary[this.cnt];
if (this.fadelinks){
this.linkcolorchange(1);
}
this.colorfade(1,true);
this.cnt=++this.cnt%this.ary.length;
},

/*Rafael Raposo edited function*/
colorfade:function(step,ud){
var oop=this;
if(step<=this.maxsteps) {
this.obj.style.color=getstepcolor(step,this.colors,this.maxsteps);
if (this.fadelinks){
this.linkcolorchange(step);
}
step++;
this.to=setTimeout(function(){oop.colorfade(step,ud); },this.ms/this.maxsteps/this.reversefade);
}
else{
clearTimeout(this.to);
this.obj.style.color='rgb('+this.colors[1][0]+', '+this.colors[1][1]+', '+this.colors[1][2]+')';
if (this.reversefade==2){
this.colors=this.colors.reverse();
}
if (ud&&this.reversefade==2){
this.to=setTimeout(function(){oop.colorfade(1,false); },this.hold);
}
else {
this.changecontent();
}
}
},

linkcolorchange:function(step){
var objs=this.obj.getElementsByTagName('A');
for (var i=0;i<objs.length;i++){
objs[i].style.color=getstepcolor(step,this.colors,this.maxsteps);
}
}

}

/*Rafael Raposo's new function*/
function getstepcolor(step,col,maxsteps) {
for(var diff,newcolor=[],i=0;i<3;i++) {
diff = (col[0][i]-col[1][i]);
if(diff > 0) {
newcolor[i] = col[0][i]-(Math.round((diff/maxsteps))*step);
}
else {
newcolor[i] = col[0][i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ('rgb(' + newcolor[0] + ', ' + newcolor[1] + ', ' + newcolor[2] + ')');
}


</script>
<div id="fscroller" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<div id="tst" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<script type="text/javascript">
<!--



new CngColor({
ID:'fscroller',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'with reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
],
hold:4000, // (optional) set delay between message change (in miliseconds) (default = 3000)
duration:2000, // (optional) duration of the effect (in miliseconds) (default = hold/2)
maxsteps:20, // (optional) number of steps to take to change from start color to endcolor (default = duration/22)
fadelinks:true, // (optional) should links inside scroller content also fade like text? , true for yes. (default = false = no)
reversefade:true // (optional) should the fade be fade 'in' and fade 'out'. (default = false = no)
});

new CngColor({
ID:'tst',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'No reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated.',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
]
});

//-->
</script>
</body>

</html>

mannkumar
08-24-2010, 10:19 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">

/***********************************************
* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

// Modified By:
// Vic Phillips (12-August-2010)
// http://www.vicsjavascripts.org.uk/

// for
// color 'in' and color 'out'
// multiple applications on a page


function CngColor(o){
this.obj=document.getElementById(o.ID);
this.ary=o.content;
this.colors=[o.startcolor,o.endcolor];
this.hold=o.hold||3000;
this.ms=o.duration||this.hold/2;
this.maxsteps=o.maxsteps||this.ms/20;
this.fadelinks=o.fadelinks||false;
this.reversefade=o.reversefade?2:1;
this.cnt=0;
this.changecontent();
}

CngColor.prototype={

/*Rafael Raposo edited function*/
//function to change content
changecontent:function(){
this.obj.innerHTML=this.ary[this.cnt];
if (this.fadelinks){
this.linkcolorchange(1);
}
this.colorfade(1,true);
this.cnt=++this.cnt%this.ary.length;
},

/*Rafael Raposo edited function*/
colorfade:function(step,ud){
var oop=this;
if(step<=this.maxsteps) {
this.obj.style.color=getstepcolor(step,this.colors,this.maxsteps);
if (this.fadelinks){
this.linkcolorchange(step);
}
step++;
this.to=setTimeout(function(){oop.colorfade(step,ud); },this.ms/this.maxsteps/this.reversefade);
}
else{
clearTimeout(this.to);
this.obj.style.color='rgb('+this.colors[1][0]+', '+this.colors[1][1]+', '+this.colors[1][2]+')';
if (this.reversefade==2){
this.colors=this.colors.reverse();
}
if (ud&&this.reversefade==2){
this.to=setTimeout(function(){oop.colorfade(1,false); },this.hold);
}
else {
this.changecontent();
}
}
},

linkcolorchange:function(step){
var objs=this.obj.getElementsByTagName('A');
for (var i=0;i<objs.length;i++){
objs[i].style.color=getstepcolor(step,this.colors,this.maxsteps);
}
}

}

/*Rafael Raposo's new function*/
function getstepcolor(step,col,maxsteps) {
for(var diff,newcolor=[],i=0;i<3;i++) {
diff = (col[0][i]-col[1][i]);
if(diff > 0) {
newcolor[i] = col[0][i]-(Math.round((diff/maxsteps))*step);
}
else {
newcolor[i] = col[0][i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ('rgb(' + newcolor[0] + ', ' + newcolor[1] + ', ' + newcolor[2] + ')');
}


</script>
<div id="fscroller" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<div id="tst" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<script type="text/javascript">
<!--



new CngColor({
ID:'fscroller',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'with reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
],
hold:4000, // (optional) set delay between message change (in miliseconds) (default = 3000)
duration:2000, // (optional) duration of the effect (in miliseconds) (default = hold/2)
maxsteps:20, // (optional) number of steps to take to change from start color to endcolor (default = duration/22)
fadelinks:true, // (optional) should links inside scroller content also fade like text? , true for yes. (default = false = no)
reversefade:true // (optional) should the fade be fade 'in' and fade 'out'. (default = false = no)
});

new CngColor({
ID:'tst',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'No reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated.',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
]
});

//-->
</script>
</body>

</html>
Thanks Vic for your response and help, but i can't seem to get your solution to work.

When i cut & paste your code into a blank document all i get when run in a browser are 2 black bordered boxes (one stacked above the other) ?

is the last section supposed to be commented out ?.....

have i mis-interpreted something ?

vwphillips
08-24-2010, 12:26 PM
opps(a typo)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">

/***********************************************
* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

// Modified By:
// Vic Phillips (12-August-2010)
// http://www.vicsjavascripts.org.uk/

// for
// color 'in' and color 'out'
// multiple applications on a page


function CngColor(o){
this.obj=document.getElementById(o.ID);
this.ary=o.content;
this.colors=[o.startcolor,o.endcolor];
this.hold=o.hold||3000;
this.ms=o.duration||this.hold/2;
this.maxsteps=o.maxsteps||this.ms/20;
this.fadelinks=o.fadelinks||false;
this.reversefade=o.reversefade?2:1;
this.cnt=0;
this.changecontent();
}

CngColor.prototype={

/*Rafael Raposo edited function*/
//function to change content
changecontent:function(){
this.obj.innerHTML=this.ary[this.cnt];
if (this.fadelinks){
this.linkcolorchange(1);
}
this.colorfade(1,true);
this.cnt=++this.cnt%this.ary.length;
},

/*Rafael Raposo edited function*/
colorfade:function(step,ud){
var oop=this;
if(step<=this.maxsteps) {
this.obj.style.color=getstepcolor(step,this.colors,this.maxsteps);
if (this.fadelinks){
this.linkcolorchange(step);
}
step++;
this.to=setTimeout(function(){oop.colorfade(step,ud); },this.ms/this.maxsteps/this.reversefade);
}
else{
clearTimeout(this.to);
this.obj.style.color='rgb('+this.colors[1][0]+', '+this.colors[1][1]+', '+this.colors[1][2]+')';
if (this.reversefade==2){
this.colors=this.colors.reverse();
}
if (ud&&this.reversefade==2){
this.to=setTimeout(function(){oop.colorfade(1,false); },this.hold);
}
else {
this.changecontent();
}
}
},

linkcolorchange:function(step){
var objs=this.obj.getElementsByTagName('A');
for (var i=0;i<objs.length;i++){
objs[i].style.color=getstepcolor(step,this.colors,this.maxsteps);
}
}

}

/*Rafael Raposo's new function*/
function getstepcolor(step,col,maxsteps) {
for(var diff,newcolor=[],i=0;i<3;i++) {
diff = (col[0][i]-col[1][i]);
if(diff > 0) {
newcolor[i] = col[0][i]-(Math.round((diff/maxsteps))*step);
}
else {
newcolor[i] = col[0][i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ('rgb(' + newcolor[0] + ', ' + newcolor[1] + ', ' + newcolor[2] + ')');
}


</script>
<div id="fscroller" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<div id="tst" style="border:1px solid black;width:150px;height:150px;font: normal 14px Arial; padding: 5px;"></div>
<script type="text/javascript">
<!--



new CngColor({
ID:'fscroller',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'with reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href=\'../morezone/index.htm\'>Click here to visit</a>',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
],
hold:4000, // (optional) set delay between message change (in miliseconds) (default = 3000)
duration:2000, // (optional) duration of the effect (in miliseconds) (default = hold/2)
maxsteps:20, // (optional) number of steps to take to change from start color to endcolor (default = duration/22)
fadelinks:true, // (optional) should links inside scroller content also fade like text? , true for yes. (default = false = no)
reversefade:true // (optional) should the fade be fade 'in' and fade 'out'. (default = false = no)
});

new CngColor({
ID:'tst',
startcolor:[255,255,255], // start color (red, green, blue).
endcolor:[255,0,0], // end color (red, green, blue).
content:[
'No reverse fade',
'<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated.',
'Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.',
'Ok, enough with these pointless messages. You get the idea behind this script.</a>'
]
});

//-->
</script>
</body>

</html>

mannkumar
08-25-2010, 06:52 PM
many thanks (keep up the great work!)