DXM Console Effect

A text effect like the console in Demon X Machina (Nintendo Switch game).

Installation

<script src="DXMEffect.js"></script>
<script>
  const elements = document.querySelectorAll('.dxm-effect');
  [].forEach.call(elements, function (el) {
      const dxmEffect = new DXMEffect(el, { 
      speed: 30,
      delay: 100,
      })
      dxmEffect.init()
  })
</script>

Examples

Basic Usage with New Line

<p class="dxm-effect">The quick brown fox
jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

Slow Animation by Dafult

const elements = document.querySelectorAll('.dxm-effect');
[].forEach.call(elements, function (el) {
    const dxmEffect = new DXMEffect(el, { 
    speed: 300,
    delay: 1000,
    })
    dxmEffect.init()
})

The quick brown fox jumps over the lazy dog.

Delayed Animation

<p class="dxm-effect" data-dxmeffect-start-delay="1000">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

Serialize Multiple Animation

<p id="effect1" class="dxm-effect">The quick brown fox jumps over the lazy dog.</p>
<p id="effect2" class="dxm-effect" data-dxmeffect-after="#effect1">The quick brown fox jumps over the lazy dog.</p>
<p id="effect3" class="dxm-effect" data-dxmeffect-after="#effect2">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

Note

Recomended using monospaced fonts.
Content text is ONLY plain text. Don’t contain unecessary white spaces and new lines.(Because DXM Effect using white-space: pre; style.)

Options

HTML data attribute	JS option object	Type	Description	Default
data-dxmeffect	lang	string	Random character’s language. (‘en’, ‘ja’, ‘ja-hiragana’, ‘ja-katakana’)	‘en’
data-dxmeffect-speed	speed	int	Random character’s changing span. (ms)	20
data-dxmeffect-delay	delay	int	Rendering span between each character. (ms)	100
data-dxmeffect-after	after	string	Query string of element that must finished before starts.	-
data-dxmeffect-start-delay	startDelay	int	Starting animation delay. (ms)	0