Punching characters and images.
Note This library depends on jquery, class-component and cc-event.
<script src="path/to/jquery.js"></script>
<script src="path/to/class-component.js"></script>
<script src="path/to/cc-event.js"></script>
<script src="path/to/puncher.js"></script>
<div class="puncher" unit-dur="120">Hello, world! <img src="foo.png" /></div>This prints Hello, world! letter by letter and the image "foo.png". Each letter displays with 120ms delay from the previous letter. This timing is configurable with the unit-dur attributes of the above example. The image tag (or any other tag) counts as a single character.
In command line:
npm install jquery class-component cc-event @kt3k/puncher
In script:
global.jQuery = require('jquery')
require('class-component')
require('cc-event')
require('@kt3k/puncher')In html:
<div class="puncher" unit-dur="120">Hello, world! <img src="foo.png" /></div>This prints Hello, world! letter by letter and the image "foo.png". Each letter displays with 120ms delay from the previous letter. This timing is configurable with the unit-dur attributes of the above example. The image tag (or any other tag) counts as a single character.
<dic class="puncher" unit-dur="120"></div>unit-dur means the unit duration of punching of characters.
When this event is triggered on the element, the punching starts.
This event is triggered when the punching starts.
This event is triggered when the punching ends.
This event is triggered on the appended element when it's appended.
MIT