A lightweight javascript library for scrambling letters within a piece of text, giving a nice decoding effect.
Loops through any elements with the relevant selector or data attribute and scrambles the letters randomly for a couple of seconds before returning them one by one to their original state.
To-do:
- Test suite.
- Better handling of nested tags?
- Download the Scrambling Letters dist files from Github or from NPM or Yarn.
- Pick the dist file you desire - ES6, ES5 or babel polyfilled. The standard ES6 version will not support IE.
- Include the minified js file in the manner of your choice. This will allow you to access the new Scrambler() function.
- Scrambler() needs to be told which piece of text to scramble.
- Initiate a Scrambler instance by calling Scrambler() with a valid selector or data-attribute.
- If you wish to add configuration, pass Scrambler an object containing config options (see below).
You can configure your Scrambler instance by passing an object. The available options are as follows:
Purpose: This is the text you wish to Scramble! Pass a selector or data attribute (or anything else valid for document.querySelectorAll).
Type: string
Default: '[data-scrambler]'
Required: Yes.
Purpose: This controls the randomised time before each letter returns to its original state. The first value is the minimum delay and the second value is the maximum. E.g. changing [1000, 3000] to [1000, 6000] would increase the maximum time.
Type: array
Default: [1000, 3000]
Required: No.
Purpose: This controls the speed a which the letters will change. I would advise leaving it at the default 100, but you can tweak this value if you desire.
Type: integer
Default: 100
Required: No.
- Scrambler will temporarily lose unique styling from text within child nodes e.g. link tags within a paragraph. This will be replaced at the end of the cycle but can result in FOUC. This is planned to be addressed later, but best practice is to be more granular in your targeting.