Results 1 to 5 of 5

Thread: fade out fading scroller

  1. #1
    Join Date
    Feb 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default fade out fading scroller

    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 ?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Last edited by vwphillips; 08-12-2010 at 03:07 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Code:
    <!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 ?

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    opps(a typo)

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    mannkumar (08-25-2010)

  6. #5
    Join Date
    Feb 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    many thanks (keep up the great work!)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •