Fade In Text

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • hopper
    New Member
    • Feb 2007
    • 8
    #1

    Fade In Text

    I am having a memory block today and for the life of me cant seem to get it right.

    Can someone help me with code to fade text in 8 seconds after the page has loaded.

    This is what i have but i dont want it to appear straight away. How do i add an 8 second delay to the text fading in.??

    Code:
    <html>
<head>
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }

</script>
</head>

<body onLoad="fade()">

<p>
<span id="fade">This text needs to fade in with an 8 second delay.</span> 
</p>

</body></html>
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Just use [HTML]<body onload="setTime Out('fade()',80 00)">[/HTML] Also set your text to be white initially.

        Comment

        • hopper
          New Member
          • Feb 2007
          • 8
          #3
          Why is my text not fading in?

          Why does this not work??

          Am I missing something very obvious!!

          Code:
          <html>
<head>
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }

</script>
</head>

<body onLoad="setTimeout'fade()',8000">

<p>
<span id="fade">This text needs to fade in 8 seconds after page load!</span> 
</p>

</body></html>

            Comment

            • wgale025
              New Member
              • Feb 2007
              • 23
              #4
              <body onLoad="setTime out('fade()',80 00)">

                Comment

                • hopper
                  New Member
                  • Feb 2007
                  • 8
                  #5
                  Thanks

                  Silly me!! that works... but how do i get it to fade in from white to black - do i have to change the col numbers? Basically what i want is 8 seconds after page load i want the text to fade in.

                  im getting very confused! I have not tried to do fading before!!

                    Comment

                    • hopper
                      New Member
                      • Feb 2007
                      • 8
                      #6
                      code thats almost there.. can you help?

                      Thing is how do i cange the initial color to white so that after page load there is a delay of 5 seconds before text fades in from white to black?

                      This is my first attempt with fading and with some help with people from here i have come up with the following.



                      Code:
                      <html>
<head>
<script language="javascript">
col=255;
function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }

</script>
</head>

<body onLoad="setTimeout('fade()',5000)">

<p>
<span id="fade">This text needs to fade in 5 seconds after page load!</span> 
</p>

</body></html>

                        Comment

                        • dorinbogdan
                          Recognized Expert Contributor
                          • Feb 2007
                          • 839
                          #7
                          Update the span like:
                          [HTML]<span id="fade" style="color:wh ite">This text needs ...[/HTML]

                            Comment

                            • hopper
                              New Member
                              • Feb 2007
                              • 8
                              #8
                              Its the simple things that trip us up!!! Thanks

                                Comment

                                • dorinbogdan
                                  Recognized Expert Contributor
                                  • Feb 2007
                                  • 839
                                  #9
                                  Glad to be of help.
                                  Be blessed.

                                    Comment

                                    • iam_clint
                                      Recognized Expert Top Contributor
                                      • Jul 2006
                                      • 1207
                                      #10
                                      Code:
                                      <html>
<head>
<script language="javascript">
var r = 255;
var g = 255;
var b = 255;
function fade(id) { 
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.color="rgb(" + r + "," + g + "," + b + ")";
r -= 5
g -= 5
b -= 5
if(r>0) 
setTimeout("fade('"+id+"')", 50); 
}
function startfade(id) {
window.setTimeout("fade('fade');", 8000);
}
</script>
</head>
<body onLoad="startfade('fade');">
<p>
<span id="fade" style="visibility: hidden;">This text needs to fade in 8 seconds after page load!</span> 
</p>
</body></html>
                                      theres a fixed up example now you can change r g b individually.

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          Threads merged.

                                            Comment

                                            • footloose
                                              New Member
                                              • Nov 2009
                                              • 4
                                              #12
                                              Thank you

                                              Clint:

                                              Thank you so much. I tested your code you gave above on one of my web pages (fading text from black to white on a black background) and it works great, giving the page more life. Is it possible to add an array of colors to it; for instance to make some additional text on the same page fade into red?

                                              Thanks again

                                                Comment

                                                • acoder
                                                  Recognized Expert MVP
                                                  • Nov 2006
                                                  • 16032
                                                  #13
                                                  What you can do is pass the colour to the function (as RGB triple) which you can use to determine when to stop.

                                                    Comment

                                                    • footloose
                                                      New Member
                                                      • Nov 2009
                                                      • 4
                                                      #14
                                                      Thank you for your reply acoder. Unfortunately with my extremely limited coding knowledge I wouldn't be able to implement your suggestion. Actually, after hours of playing with it I've not even been able to make the code work on more than one section of text. When I attempt to fade a second section, the other one stops working...let alone adding a second color to it.
                                                      If you get the opportunity I would greatly appreciate if you would please show me how to do it.

                                                      Thank you

                                                      The test page on my website shows the white text fading in properly. Now I'd like to fade in the red heading above it in the same way, "Latest News," and similar headings on the other pages.
                                                      http://www.billyjoeconor.com/home_test.html

                                                        Comment

                                                        • acoder
                                                          Recognized Expert MVP
                                                          • Nov 2006
                                                          • 16032
                                                          #15
                                                          Rather than make r,g,b global, you can have them as parameters, e.g.
                                                          Code:
                                                          function fade(id, r, g, b) {
                                                          and pass them when you call the function:
                                                          Code:
                                                          fade('fade',0,0,0)
                                                          You may also want to specify the end color, e.g.
                                                          Code:
                                                          function fade(id, r, g, b, end) { 
...
if (r < end) { ...
                                                          To use the function more than once, give the heading an ID and call the function with that ID and correct parameters.

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...