0.0.9 • Published 2 years ago

scramble-text v0.0.9

Weekly downloads
9
License
MIT
Repository
github
Last release
2 years ago

ScrambleText

Free version of Greensock's Scramble Text like text shuffle effect.

Latest NPM release MIT License

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

paramrequired
timeOffsetoptionalrelay between each steps in millisecons
charsoptionalarray of custom characters
callbackoptionalfunction 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();
0.0.9

2 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

1.0.0

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago