How to use it
1. Add the script
<script src="scramble.js"></script>
2. Rotate words in a headline
List the words with a | between them. The first word is shown at the start.
<h1>We build <span data-scramble-words="websites|web shops|plugins">websites</span></h1>
3. Or decode a heading once
The heading plays when the visitor scrolls to it.
<h2 data-scramble>This text decodes itself</h2>
All options
| Attribute | Default | What it does |
|---|---|---|
data-scramble | Decodes the text once, when it comes into view. | |
data-scramble-words="a|b|c" | Cycles through the words forever. | |
data-scramble-pause="2200" | 2200 | How long each word stays, in milliseconds. |
data-scramble-speed="28" | 28 | Milliseconds per step. A smaller number is faster. |
data-scramble-chars="01" | symbols | The characters used for the noise. Try 01 for a binary look. |
Start it from your own code
For a button, a form message or anything else, call it directly. It returns a Promise, so you can chain texts.
var fx = TextScramble(document.querySelector('#status'));
fx.to('Sending...').then(function () { return fx.to('Done!'); });Colour the noise
The flickering characters get the class scramble-noise. Style it to give them their own colour.
.scramble-noise { color: #3ad6f0; opacity: .7; }Tips
- Use a monospace font if the line jumps in width while it decodes. In a monospace font every letter has the same width.
- Give the element a minimum width when you rotate words of different lengths, so the rest of the line stays still.
- Keep it to one headline per screen. More than that becomes hard to read.
Accessibility
Screen readers get the final text through aria-label, not the random characters. Visitors with reduced motion switched on see the plain text.
What is in the download
scramble.jsthe script, about 3 KBindex.htmlanddemo.cssthe demo page you see aboveREADME.txtandLICENSE.txtthe short guide and the MIT licence
Licence
MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.