ScrambleText
Free version of Greensock's Scramble Text like text shuffle effect.
demos
Usage
as Standalone lib
Copy ScrambleText.js from /dist/ScrambleText.js and place it in your project.
<script src="./js/ScrambleText.js"></script>
with NPM
$ npm install --save scramble-text
then
import ScrambleText from 'scramble-text';
Applying effects
<p id="text1">Scramble Text</p>
<button onclick="startFx()">start trigger</button>
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).play();
// you can start the effect whenever you want
function startFx() {
scrambleText.start();
}
APIs
Constructor
ScrambleText( element, options )
Options
param | required | |
---|---|---|
timeOffset |
optional | relay between each steps in millisecons |
chars |
optional | array of custom characters |
callback |
optional | function that is called when ended the effect |
e.g.
var scrambleText = new ScrambleText(
document.getElementById( 'text' ),
{
timeOffset : 200,
chars: [
'安','以','宇','衣','於',
'加','幾','久','計','己',
'左','之','寸','世','曽',
'太','知','川','天','止',
'奈','仁','奴','称','乃',
'波','比','不','部','保',
'末','美','武','女','毛',
'也','為','由','恵','与',
'良','利','留','礼','呂',
'和','遠','无'
],
callback: function () { console.log( 'ended' ); }
}
);
Methods
play()
start()
stop()
e.g.
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).start().play();