javascript library: make the typewriter effect.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src Rewrite include library function Jan 30, 2017
.babelrc
.gitignore ignore .log files Jan 29, 2017
.npmignore
CHANGELOG.md
LICENSE.md Create LICENSE.md Jan 31, 2017
README.md doc: change document format Mar 20, 2018
cover.jpg Cover photo May 15, 2016
gulpfile.babel.js Add sourcemap of .min.js Feb 5, 2017
package.json chore: rearrange properties in package.json Mar 20, 2018
yarn.lock

README.md

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:

$ yarn add typewriting

# $ npm install --save 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');
});