A simple but powerful typewriting animation plugin written by ES6

👉Not only support typing and backspace, but also support moving cursor and adding css style

ShowCase 😲

Usage 🔨

step1. init a animate instance

1. using in es6

import Bilibala from 'bilibala'
var instance = new Bilibala(element, [text], [options])

2. use in browser

<div id="container"></div>
<script src="/path/bilibala.js"></script>
<script>
  window.onload = function () {
    const container = document.getElementById('container')
    new Bilibala(container, [text], [options])
  }
</script>

step2. typing ,backspace...

1. typing

   // it will type a character in 80ms
   instance.type('hello', {
     speed: 80
   })

2. backspace

   instance.backspace(10, [options])

3. moving cursor

   // move backward
   instance.move(-10)
   // move forward
   instance.move(10)

4. wait

   // cursor will wait for 3000ms
   instance.wait(3000)

5. add css style when typing

   instance.type('add style', {
     style: {
       color: 'red'
     }
   })

6. change the element type when typing

   instance.type('github', {
     tag: 'a',
     attrs: {
       href: 'github.com'
     }
   })

TODO 🔢

❌ add compile support

LICENSE

MIT