ansaurus

Question

simple text animation in JavaScript/DHTML/canvas

Answer 1

+1 A:

Feel free to use:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Jevgenis Animation</title>
        <script type="text/javascript">
          var c = -1;
          var els = new Array("el1", "el2", "el3", "el4");
          function nextEffect() {
            for(i = 0; i <= 3; i++)
              document.getElementById(els[i]).style.textShadow = "2px 2px #FF3333";
            c = c >= els.length - 1 ? 0 : c + 1;
            var e = document.getElementById(els[c]);
            e.style.textShadow = "0 0 3px #FF3333";
          }
        </script>
        <style type="text/css">
          .shadow { text-shadow: 2px 2px #FF3333 }
        </style>
      </head>
      <body onload="setInterval('nextEffect()', 1000);">
        <span id="el1" class="shadow">do this</span>
        <span id="el2" class="shadow">do that</span>
        <span id="el3" class="shadow">then this</span>
        <span id="el4" class="shadow">then that</span>
      </body>
    </html>

Tested it, works fine in FF, Opera, Chrome, Safari.

For IE, you should probably implement something similar:

el1 { filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45)
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')}

Jevgeni Bogatyrjov 2010-09-25 22:29:14

ansaurus

tags:

views:

answers:

simple text animation in JavaScript/DHTML/canvas

related questions