THEMETRIAL

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

Author:WojciechKrakowiak
Views Total:1 view
Official Page:Go to website
Last Update:January 12, 2021
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="https://www.cssscript.com/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 (01/12/2021)

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


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.