Stylize Text Letter By Letter With jQuery - PrettyLetters

The jQuery PrettyLetters plugin splits your text into separate letters so that you can style and animate each letter individually. Also available for Angular, React and Vanilla JavaScript.

See also:

• Powerful Web Typography Plugin For jQuery - Lettering.js
• jQuery Plugin To Split Text By Lines - SplitLines

How to use it:

1. Install and import the PrettyLetters into your project.

# NPM
$ npm install pretty-letters --save

// ES 6
import prerttyLetters from 'pretty-letters';

// CommonJS:
const prerttyLetters = require('pretty-letters');

2. Or include the prettyLetters.min.js directly.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/prettyLetters.min.js"></script> 

3. Call the function on the text container.

<h2 class="demo">jQuery Script</h2>

$( '.demo' ).prettyLetters();

4. This will split the text jQuery Script into separate letters wrapped in span elements as these:

<h2 class="demo">
  <span class="group-0">
    <span class="char-0">j</span>
    <span class="char-1">Q</span>
    <span class="char-2">u</span>
    <span class="char-3">e</span>
    <span class="char-4">r</span>
    <span class="char-5">y</span>
  </span>
  <span class="group-1">
    <span class="char-0">S</span>
    <span class="char-1">c</span>
    <span class="char-2">r</span>
    <span class="char-3">i</span>
    <span class="char-4">p</span>
    <span class="char-5">t</span>
  </span>
</h2>

5. Override the default CSS classes and prefixes in the JavaScript.

$( '.demo' ).prettyLetters({
  charClass: 'char-';
  groupClass: 'group-';
  groupTag: 'span';
  charTag: 'span';
});

---

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