letterit
v1.0.4
Published
A javascript helper to split HTML text into characters
Downloads
6
Readme
LetterIt
I created this as a simple and easy way to add staggering delays to CSS transition effects to sentences.
It takes a sentence such as "Hello World" and will wrap each character in a div
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<!-- Etc -->
Usage
Install the script npm install letterit --save
Once installed use it like this
import LetterIt from 'letterit'
LetterIt.init();
You also need to add some data attributes to your HTML elements
<h1 class="letterIt" data-transition-delay="0.01" data-letterit="letter">
Quiet and secluded
</h1>
You can change the data-transition-delay attribute to any duration. Leaving this out will provide no delayed transition.
You then need to add your own CSS transitions in your style sheet.
eg
.letterIt .letter{
transition:all 1s ease-in-out;
opacity:0;
}
.letterIt.active .letter{
opacity:1;
}
In the above example the text will not display until the letterIt class has had the active class applied to it. Once applied each character should show with a nice staggering delay.