デモンエクスマキナのコンソール風アニメーション

こんな感じのアニメーションをJSで作ってみました。

デモページ: https://sujoyu.github.io/dxm-text-animation/demo

インストール

リポジトリ: https://github.com/sujoyu/dxm-text-animation

npm に上げたりモジュール化してないので愚直に。

<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>

サンプルコード

普通の使い方

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

遅いアニメーション

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

開始にディレイを入れる

<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.

複数要素を順次アニメーションする

<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>

注意

• 等幅フォント使うのがおぬぬめ。
• 中に使えるのはプレーンテキストだけです。 white-space: preを使ってるので不要な改行や空白を入れないよう注意してください。