Wave Text Effect

Need a waving text? There is no need to use static images any more. This script will help you!
Wave Text Effect is a jQuery plugin that creates a “wave effect” out of an HTML header.
Most important – waving text will be friendly for search engines, editable, selectable.
You can use wave period, amplitude and spacing between the letters to customize your effect.
For further styling you can still use style sheets – changing your font type, size, colour, background, etc.

To create the Wave Text Effect, you can also try using other HTML elements (without line breaks), not only headers. Works best with monospace fonts.

What can be customized?

This effect lets you use the CSS styles, but also allows you to set wave period, amplitude and letter spacing (check out the detailed instructions below).
If you want to test your script, you can use this visual generator:

Enter your text:
Period (length):
Amplitude:
Letter spacing:

Make your very own cool Wave Text!

Notice that:

Easy to use:

  1. Let's say, that your HTML code looks like this:

                    
<!DOCTYPE html>
<html>
<head>
    <title>Wave Text Effect</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <style>
        body { padding: 60px; }
        h3 { font-family: Courier New, Courier, monospace; }
    </style>
</head>
<body>

    <h3 id="myHeader">jQuery plugin that creates a wave effect out of an HTML header.</h3>

</body>
</html>

    And your file/folder structure may be like this:

    ..
    js/
    css/styles.css
    index.html


    If you want to add Wave Text Effect – that's how you do it:

  2. Place the wave.js file into the directory containing your script files.
    Also remember to include jQuery in your project.

    ..
    js/wave.js
    js/3rdparty/jquery-1.8.2.js
    css/styles.css
    index.html

  3. Include jQuery and Wave Text Effect script in your HTML. You should put those elements in META section (alternatively at the end of your file).

    <script src="js/3rdparty/jquery-1.8.2.js"></script>
    <script src="js/wave.js"></script>

  4. Look at your heading element.

    <h3 id="myHeader">My very own cool Wave Text Header!</h3>


    We will recognize it by the ID ("myHeader") and we will use it in our configuration script below.

  5. Configure your Wave Text Effect, adding this piece of code (META section): 

                    
                <script>
                    $(function() {

                        $('#myHeader').waveText({
                            'period' : 0.5,
                            'amplitude' : 20,
                            'letterSpacing' : 14
                        });
                        
                    });
                </script>

  6. Now the site code looks like this: 

                    
<!DOCTYPE html>
<html>
<head>
    <title>Wave Text Effect</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <style>
        body { padding: 60px; }
        h3 { font-family: Courier New, Courier, monospace; }
    </style>
    <script src="js/3rdparty/jquery-1.8.2.js"></script>
    <script src="js/wave.js"></script>
    <script>
        $(function() {

            $('#myHeader').waveText({
                'period' : 0.5,
                'amplitude' : 20,
                'letterSpacing' : 14
            });

        });
    </script>
</head>
<body>

    <h3 id="myHeader">jQuery plugin that creates a wave effect out of an HTML header.</h3>

</body>
</html>
  7. You can use CSS to style your text, change color, fonts, add backgrounds etc.
  8. That's all!

Package contents: