Text fade in fade out effect in HTML5

Why does HTML 5 attract web developers

The following code example shows the text fade in and fade out effect on the canvas in HTMl5.

For this effect we are using the rgb values to set the fillStyle of the text. The program increase the rgb values for the fade-out effect
and decrease the rgb values for the fade-in effect. See the Demo.

<html>
<head>
    <title>Text fade in – fade out Animation</title>
    <style>
        canvas{border: 1px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
    </style>
 
    <script type="text/javascript">
        var can, ctx, step = 50, steps = 255;
              delay = 20;
              var rgbstep = 50;
 
        function init() {
            can = document.getElementById("MyCanvas1");
            ctx= can.getContext("2d");
            ctx.fillStyle = "blue";
            ctx.font = "40pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
                     Textfadeup();        }
 
          function Textfadeup() {
            rgbstep++;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"
            ctx.fillText("WELCOME", 150, 100);
            if (rgbstep < 255)
                var t = setTimeout('Textfadeup()', 10);
            if (rgbstep == 255) {
                Textfadedown();
            }
        }
        function Textfadedown() {
rgbstep=rgbstep-1;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"
            ctx.fillText("WELCOME", 150, 100);
            if (rgbstep > 80)
                var t = setTimeout('Textfadedown()', 10);
            if (rgbstep == 80) {
                Textfadeup();
            }
        }  
    </script>
 
</head>
<body onload="init();">
    <div class="subdiv">
        <canvas id="MyCanvas1" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>
          </div>
</body>
</html>

3 thoughts on “Text fade in fade out effect in HTML5”

  1. I’ve tried doing this by copying and pasting your code into notepad and all I get is a black box, any ideas what I might be doing wrong ?

  2. Very nice. Is there a way to word-wrap a larger line of text? Or cycle a series of words or phrases (i.e. “Welcome” , “to” , “my” , “page”)?

Comments are closed.