The Matthias Chronicles

Saturday, October 4, 2008, 2:14 PM

WaveText: a cool looking Javascript

by Mar Matthias Darin

Many thank you's to Lea for helping me test the new comment module on my blog. I am appreciatively greatful.

Unlike my page load timer, WaveText is a fun and frivolous visual script that brings a little playfulness to any page its used on. Its also quite small and very flexible. Here's an example:

Cool looking, isn't it? Now where would you use such a visual effect? You can use this script anywhere you want a little pizzazz to spice up a page. New or updated items on the page can really stand out with this effect. The code to this is surprisingly simple:

<script type="text/javascript">
<!--

function toSpans(span)
  {
    var str=span.firstChild.data;
    var a=str.length;

    span.removeChild(span.firstChild);

    for(var i=0; i<a; i++)
      {
        var theSpan=document.createElement("SPAN");
        theSpan.appendChild(document.createTextNode(str.charAt(i)));
        span.appendChild(theSpan);
      }
  }

// dir - how fast the text grows and shrinks
// min - the smalled size wanted
// max - the largest size wanted
// spd - how fast to make the text "wave", lower is faster

function WaveTextSpan(span, dir, min, max, spd)
  {
    this.min=(min==null?5:Math.abs(min));
    this.max=(max==null?72:Math.abs(max));
    this.dir=(dir==null?1:Math.abs(dir));
    this.fact=Math.abs(dir);
    this.length=span.firstChild.data.length;
    this.span=span;
    this.speed=(spd==null?50:Math.abs(spd));
    this.timer=null;

    toSpans(span);
    this.moveWaveText();
  }

WaveTextSpan.prototype.moveWaveText = function()
  {
    var a=this.length;
    var s, d;

    s=(this.span.childNodes[0].style.fontSize)?
      parseInt(this.span.childNodes[0].style.fontSize):
      this.min+1;

    if(s<=this.min)
      this.dir=this.fact;
    else
      {
        if(s>=this.max)
          this.dir=-this.fact;
      }

    d=this.dir;

    for(var i=0; i<a; i++) {
      if(s<=this.min)
        d=this.fact;
      else
        {
          if(s>=this.max)
            d=-this.fact;
        }

      s+=d;

      this.span.childNodes[i].style.fontSize=s+'px';
    }
  }
//  -->
</script>

Here is what I used to create the above example:

<p><center>
<h3 id="Wave">Yo, Dude! Awesome! Ride the wave!</h3>
</center>

<script type="text/javascript">
var Wave=document.getElementById("Wave");
var myWaveTextSpan=new WaveTextSpan(Wave, 2, 10, 36, 50);
myWaveTextSpan.timer=window.setInterval("myWaveTextSpan.moveWaveText()",
    myWaveTextSpan.speed);
</script>

And there is even a simplified example page. Give it a try and add a little pizzazz to your page today!

Comments from Mize ^{82.154.198.67}

Hi. It´s cool! It´s really a wave effect. Thanks for sharing. A good Sunday.

Comments from Lea ^{208.106.107.167}

It was my pleasure. I'm glad everything is working as its suppose to. Have a great day!

Comments from The Fitness Diva ^{72.227.166.40}

Hey, I really like that! That's really eye catching, isn't it? Is a great effect to put on a sidebar or header of a site to grab attention. Thanks for sharing that code! :)

Comments from Karen, author of "My Funny Dad, Harry" ^68.21.251.5

A bit too snazzy for me. I prefer simple and easy to read and something that isn't bouncing all over the place. Just my opinion.

Comments from Mar Matthias Darin

You're welcome.

The Fitness Diva: Its really versitile in the illusions it creates as well, depending of the options you pass to the function you can greate short waves to monster roller coaster waves. I have to also admit is fun to play with the different settings to see what visual effects it produces.