Free version of Greensock's Scramble Text like text shuffle effect.
npm install scramble-textFree version of Greensock's Scramble Text like text shuffle effect.
!MIT License
Copy ScrambleText.js from /dist/ScrambleText.js and place it in your project.
``
`
$ npm install --save scramble-text
then
`
import ScrambleText from 'scramble-text';
` Scramble Texthtml`
`javascript
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).play();
// you can start the effect whenever you want
function startFx() {
scrambleText.start();
}
`
`
ScrambleText( element, 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.
`javascript`
var scrambleText = new ScrambleText(
document.getElementById( 'text' ),
{
timeOffset : 200,
chars: [
'安','以','宇','衣','於',
'加','幾','久','計','己',
'左','之','寸','世','曽',
'太','知','川','天','止',
'奈','仁','奴','称','乃',
'波','比','不','部','保',
'末','美','武','女','毛',
'也','為','由','恵','与',
'良','利','留','礼','呂',
'和','遠','无'
],
callback: function () { console.log( 'ended' ); }
}
);
- play()
-
-
e.g.
`javascript``
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).start().play();