Author: | WojciechKrakowiak |
---|---|
Views Total: | 1,146 views |
Official Page: | Go to website |
Last Update: | April 20, 2022 |
License: | MIT |
Preview:

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
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()