Stylize Text Letter By Letter With jQuery - PrettyLetters

Stylize Text Letter By Letter With jQuery - PrettyLetters
File Size: 23.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.