Wrap Each Character From Your Text In An HTML Element – Letterize.js

Category: Javascript , Text | February 21, 2020
Author: WojciechWKROPCE
Views Total: 78
Official Page: Go to website
Last Update: February 21, 2020
License: MIT

Preview:

Wrap Each Character From Your Text In An HTML Element – Letterize.js

Description:

Letterize.js is a JavaScript library to wrap each letter from your text in a given HTML element (defaults to span) for further use (e.g. character by character animations).

How to use it:

1. Download and load the minified version of the Letterize.js library in the document.

<script src="/path/to/lib/letterize.min.js"></script>

2. Create a new Letterize instance and determine the target element containing the text you’d like to ‘Letterize’.

<div class="demo">CSSScript.Com</div>
var example = new Letterize({
    targets: ".demo"
});

3. Override the default HTML element in which you want to wrap the letters. Default: <span>.

var example = new Letterize({
    wrapper: "div"
});

4. Specify the CSS class applied to the letters. Default: .letter.

var example = new Letterize({
    className: "letter"
});

5. Get an array of arrays containing all wrapper elements with letters.

example.list();

6. Or without any division.

example.listAll();

7. More API methods.

// returns an array of targets
example.getTargets();

// returns the wrapper node
example.getWrapper();

// returns the classname
example.getClassName();

// destroy the instance
example.deletterize();

More Examples:

See the Pen
Letterize.js + Anime.js example #2
by Wojciech Krakowiak (@WojciechWKROPCE)
on CodePen.

See the Pen
Letterize.js + Anime.js example #3
by Wojciech Krakowiak (@WojciechWKROPCE)
on CodePen.

You Might Be Interested In:


One thought on “Wrap Each Character From Your Text In An HTML Element – Letterize.js

  1. Wojciech Krakowiak

    Thanks for sharing!
    However, there is one mistake. There’s no default class applied to letters’ wrappers. If you don’t specify it, they’ll be wrapped in pure . But you can still get the elements using methods .list() and .listAll()

    Reply

Leave a Reply