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

• Example
• jsDoc
• Coverage