typewriting

1.2.8 • Public • Published

TypeWriting.js npm version

https://unsplash.com/photos/E0Spm6XXn2Y

If you want to make the typing effect, this is what you need.

TypeWriting DEMO

Note: TypeWriting.js doesn't depend on jQuery since version 1.2. If you want to keep the old version, please check another branch - jQuery-v1.1.3.


Installation

Just clone or download the zip of this repository

or via npm:

# npm install --save typewriting 
$ yarn add typewriting

Setup

<!-- just typewriting.js or .min.js -->
<script src='path/to/typewriting.min.js'></script>

or

// import in your .js file
import TypeWriting from 'typewriting';

TypeWriting()

  • targetElement: HTML element required
    Your element
  • inputString: String required
    Your text
  • typingInterval: Int
    Interval between each character
  • blinkInterval: String
    Interval of the cursor blinks
  • cursorColor: String
    Color of the cursor

I use the height of targetElement to set the cursor height. You could use its line-height to control cursor height.

Second parameter is the function after typing effect.

const typeWriting = new TypeWriting({
    targetElement   : document.getElementsByClassName('terminal')[0],
    inputString     : 'Hello, world.',
    typingInterval  : 130,
    blinkInterval   : '1s',
    cursorColor     : '#00fd55',
}, () => console.log('END'));

rewrite()

You could use this function to do the same effect but different text at same element.

typeWriting.rewrite('Welcome to TypeWriting.js', () => {
    console.log('Rewrite() is finished');
});

Package Sidebar

Install

npm i typewriting

Weekly Downloads

0

Version

1.2.8

License

MIT

Unpacked Size

22.7 kB

Total Files

11

Last publish

Collaborators

  • eddiewen