Configurable Text Wave Effect In jQuery - textWave.js

jQuery textWave.js is a small jQuery text animation plugin used to create a fancy, fully configurable Text Wave effect by zooming the text letter by letter. Distributed under the GPLv3 license.

How it works:

The script loops over the letters captured in the elment content. On each loop, a mask (somewhat like a array filled with ratios) moves on top of the String. This means another loop that will test if the current letter index match to any of the current mask ratio.

How to use it:

1. Insert the latest version of jQuery library (slim build) and the jQuery textWave.js script into the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.textwave.js"></script>

2. Create a placeholder element where you want to generate the text.

<span id="content"></span>

3. Call the function on the placeholder element and specify the text.

$('#content').textWave({
  text:'jQueryScript.Net'
});

4. Customize the text wave effect.

$('#content').textWave({

  text:'jQueryScript.Net',

  // Enlargement ratio
  ratio: 2

  // 'loop' = infinie loop
  repeat: 2

  // rate of the animation
  framerate: 60

});

5. Stop the text wave effect manually.

$('#content').textWave('stop');

---

This awesome jQuery plugin is developed by stphane. For more Advanced Usages, please check the demo page or visit the official website.