Fading in and out

Discussion in 'Javascript' started by Rich Sagall, May 15, 2006.

  1. Rich Sagall

    Rich Sagall Guest

    I am just learning Javascript and looking for some help with having a
    series of quotes that will fade in and out of the website.

    Thanks,

    Rich
     
    Rich Sagall, May 15, 2006
    #1
    1. Advertising

  2. Rich Sagall

    Evertjan. Guest

    Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:

    > I am just learning Javascript and looking for some help with having a
    > series of quotes that will fade in and out of the website.


    Fading on a page should be possible,
    but having text fade out of a whole website,
    that would be telling!

    IE only:

    <http://msdn.microsoft.com/library/default.asp?
    url=/workshop/author/filter/reference/filters/fade.asp>

    If you want more than the IE only filters, look here:

    <http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>

    But that is not a beginners task.


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., May 15, 2006
    #2
    1. Advertising

  3. Rich Sagall

    Rich Sagall Guest

    Evertjan. <> wrote:

    > Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:
    >
    > > I am just learning Javascript and looking for some help with having a
    > > series of quotes that will fade in and out of the website.

    >
    > Fading on a page should be possible,
    > but having text fade out of a whole website,
    > that would be telling!
    >
    > IE only:
    >
    > <http://msdn.microsoft.com/library/default.asp?
    > url=/workshop/author/filter/reference/filters/fade.asp>
    >
    > If you want more than the IE only filters, look here:
    >
    > <http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>
    >
    > But that is not a beginners task.


    I wasn't clear - not the whole page, just a small section of the website
    needs to fad in and out with different quotes from users of the website.

    Rich
     
    Rich Sagall, May 15, 2006
    #3
  4. Rich Sagall

    Evertjan. Guest

    Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:

    > Evertjan. <> wrote:
    >
    >> Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:
    >>
    >> > I am just learning Javascript and looking for some help with having
    >> > a series of quotes that will fade in and out of the website.

    >
    > I wasn't clear - not the whole page, just a small section of the
    > website needs to fad in and out with different quotes from users of
    > the website.


    It seems you have a strange definition of the word website, Rich:

    A website can contain thousands of webpages.

    Clientside Javascript only [mainly] acts in and on one single page.

    >>
    >> Fading on a page should be possible,
    >> but having text fade out of a whole website,
    >> that would be telling!
    >>
    >> IE only:
    >>
    >> <http://msdn.microsoft.com/library/default.asp?
    >> url=/workshop/author/filter/reference/filters/fade.asp>
    >>
    >> If you want more than the IE only filters, look here:
    >>
    >> <http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>
    >>
    >> But that is not a beginners task.


    What about these links, was that what you asked for?


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., May 15, 2006
    #4
  5. (Rich Sagall) writes:

    > I am just learning Javascript and looking for some help with having a
    > series of quotes that will fade in and out of the website.


    The easiest and most portable is to just change the color of the text
    to match the background. If the background isn't a solid color, you'll
    have to fade the text to transparent, which is not as widely supported
    (it's not part of the current CSS standard, but will probably be in the
    next one, many years from now).

    To fade text from one color to the next, we'll need a function to
    calculate the intermediate steps. For this I'll construct a Color-
    object contructor with appropriate methods:

    ----

    /** r,g,b must be integers in range [0,255] for toString to work */
    function Color(r,g,b) {
    this.r = r;
    this.g = g;
    this.b = b;
    }
    /** otherColor is a Color, degree is number in range [0..1] */
    Color.prototype.blend = function blend(otherColor, degree) {
    var invDegree = 1 - degree;
    return new Color(Math.round(otherColor.r * degree + this.r * invDegree),
    Math.round(otherColor.g * degree + this.g * invDegree),
    Math.round(otherColor.b * degree + this.b * invDegree));
    };
    Color.prototype.toString = function toString() {
    return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
    };

    // then the animator

    /**
    * elem : element to apply style to
    * styleProp: style property to assign color to (e.g. "color"
    * or "backgroundColor")
    * color1: starting color;
    * color2: ending color
    * steps : number of intermediate steps
    * delay : number of milliseconds between steps (approx.)
    * callback: optional function called when fading is complete.
    * called with elem, styleProp and color2 as arguments.
    */
    function fade(elem, styleProp, color1, color2, steps, delay, callback) {
    var step = 0;
    var id = setInterval(function() {
    step++;
    var newColor = color1.blend(color2, step/steps);
    elem.style[styleProp] = newColor.toString();
    if (step >= steps) {
    clearInterval(id);
    if (callback) {
    callback(elem, styleProp, color2);
    }
    }
    }, delay);
    return id;
    }

    // then just use it: fade from black-on-white to orange-on-black in 0.5sec
    fade(document.body, "color", new Color(0,0,0), new Color(0xff, 0x80, 0),
    50, 10);
    fade(document.body, "backgroundColor", new Color(255,255,255),
    new Color(0, 0, 0), 50, 10);

    ---

    You can the fade your quote in and out with this (assume the background is
    white):
    ---
    <blockquote id="myQuote" style="background:white;color:black;">
    This is a quote
    </blockquote>

    <script type="text/javascript">
    var quoteBlock = document.getElementById("myQuote");
    var black = new Color(0,0,0);
    var white = new Color(255,255,255);
    var quotes = [
    "This is a quote",
    "This is NOT a quote",
    "This is a puppy",
    "Lorem ipsum etc"];

    function gotoQuote(i) {
    fade(quoteBlock,"color", black, white, 50, 20, function() {
    quoteBlock.innerHTML = quotes; // or however it's changed;
    fade(quoteBlock, "color", white, black, 50, 20, function() {
    setTimeout(function() {
    gotoQuote((i+1)%quotes.length);
    }, 5000); // next quote after 5 sec.
    })
    });
    }

    gotoQuote(1);
    </script>
    ---

    Good luck
    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, May 15, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael
    Replies:
    1
    Views:
    341
    Harald Hein
    Dec 23, 2003
  2. az bij

    Fading Frame Contents

    az bij, Oct 21, 2003, in forum: HTML
    Replies:
    6
    Views:
    911
    Mark Parnell
    Oct 23, 2003
  3. bjg

    Fading colours with CSS

    bjg, Dec 10, 2003, in forum: HTML
    Replies:
    18
    Views:
    20,373
    Toby A Inkster
    Dec 12, 2003
  4. Yuk Cheng
    Replies:
    2
    Views:
    136
    Dan Webb
    Jul 19, 2004
  5. Replies:
    0
    Views:
    297
Loading...

Share This Page