jQuery Plugin To Create Colorful Wavy Text - wavytext

wavytext is a jQuery text animation plugin which takes advantage of CSS3 animations to create colorful, wavy text on the web page. It is great for creating animated, attractive headings for your web pages to grab your visitor's attention.

How to use it:

1. Load the latest jQuery library and the jQuery wavytext in your html page.

<script src="jquery.min.js"></script>
<script src="wavytext.js"></script>

2. Animate the characters in your text like waves.

$('h1').wavyText({
  // options
});

3. Possible options to customize the text animation.

// vendor prefixes
prefixes: ['-ms-', '-webkit-', '-o-', '-moz-', ''],

// animation name
animation_name: 'funkyGrad',

// animation speed
transition_speed: '0.8s',

// an object, where each key represents a number from 1-100, 
// for each step of the keyframe animation. 
keyframes: {
  '0': ['0', 'red'],
  '20': ['10px', 'orange'],
  '40': ['20px', 'yellow'],
  '60': ['25px', 'green'],
  '80': ['10px', 'blue'],
  '100': ['0', 'purple']
},

// an array of strings representing custom classes for each wavyText character
char_classes: [],

// the tag id to use
style_id: 'wavy-text-custom'

---

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