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

Category: Javascript , Text | April 20, 2022
Author:WojciechKrakowiak
Views Total:1,146 views
Official Page:Go to website
Last Update:April 20, 2022
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.

Changelog:

v2.0.1 (04/20/2022)

  • Update

v2 (01/12/2021)

  • Introduced Typescript with types declarations. Replaced majority of methods with read-only parameters

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