Split Text String Into Individual Characters – Charming.js

Category: Javascript , Recommended , Text | June 9, 2018
Author: yuanqing
Views Total: 2,438
Official Page: Go to website
Last Update: June 9, 2018
License: MIT

Preview:

Split Text String Into Individual Characters – Charming.js

Description:

Charming.js is a prue ES6 JavaScript library that splits text strings into individual characters wrapped in the corresponding span elements so that you can style them in the CSS. Inspired by the jQuery Lettering.js plugin.

Installation:

# Yarn
yarn add charming

# NPM
$ npm install charming

How to use  it:

Import the charming into your project.

const charming = require('charming')

Initialize the charming library and specify the target text node.

var element = document.querySelector("h1");
charming(element);

This will convert …

<h1>Charming</h1>

Into …

<h1>
  <span class="char1">C</span>
  <span class="char2">h</span>
  <span class="char3">a</span>
  <span class="char4">r</span>
  <span class="char5">m</span>
  <span class="char6">i</span>
  <span class="char7">n</span>
  <span class="char8">g</span>
</h1>

Override the default CSS prefix.

var element = document.querySelector("h1");
charming(element,{
  classPrefix: 'char'
});

Override the default wrapping element.

var element = document.querySelector("h1");
charming(element,{
   tagName: 'span'
});

Changelog:

v2.2.4 (06/09/2018)

  • JS & CSS update

You Might Be Interested In:


Leave a Reply