randext
A programable, random letter animation effect to display text messages.
Usage
npm install --save randext
ES Module
import Randext from 'randext';
const randext = new Randext({
element: document.querySelect('[data-randext]'),
});
randrix.start();
UMD Module
<script type="text/javascript" src="node_modules/js.randext/dist/randext.min.js"></script>
<script type="text/javascript">
var randrext = new window.Randext.default({
element: document.querySelect('[data-randext]'),
interval: 60,
ignore: '-_,;:./()[]{}<>\'"`#$%&@€!?',
style: ['small', 'underlined', 'strong'],
callback: () => {},
});
randext.start();
</script>
CSS
[data-randext] {
display: block;
margin-bottom: 1em;
unicode-bidi: embed;
font-family: inherit;
font-size: 1em;
letter-spacing: .064em;
line-height: 1.875em;
white-space: pre-line;
width: 100%;
color: inherit;
}
[data-randext] {
opacity: 0;
}
[data-randext="true"] {
opacity: 1;
}
[data-randext-char] {
display: inline-block;
width: .65em;
height: 1.66em;
font-size: inherit;
font-family: inherit;
letter-spacing: inherit;
line-height: 1.6em;
vertical-align: middle;
}
[data-randext-char-active="true"] {
font-weight: bold;
opacity: 1;
}
Example
Custom
import Randext from 'randext';
const randext = new Randext({
element: document.querySelect('[data-randext]'),
interval: 60,
ignore: '-_,;:./()[]{}<>\'"`#$%&@€!?',
style: ['small', 'underlined', 'strong'],
callback: () => {},
});
randrix.start();
Multiple
Generator
Generator, yield example. Go to next() with the Randext callback option.
import Randext from 'randext';
const elements = document.querySelectorAll('[data-randext]');
function* init(configs) {
for (let i = 0; i < configs.length; i++) {
yield emit(configs[i]);
}
}
function emit(config) {
config.instance.start();
}
const configs = [];
elements.forEach( (element) => {
configs.push({
instance: null,
settings: {
element: element,
callback: () => text.next(),
},
});
});
configs.forEach( (config) => {
config.instance = new Ranext(config.settings);
config.instance.init();
});
const text = init(configs);
text.next();
Documentation