https://github.com/eddiewentw/typewriting.js

javascript library: make the typewriter effect.
https://github.com/eddiewentw/typewriting.js

blink javascript plugin typewriter

Last synced: 9 months ago
JSON representation

javascript library: make the typewriter effect.

• Host: GitHub
• URL: https://github.com/eddiewentw/typewriting.js
• Owner: eddiewentw
• License: mit
• Created: 2015-03-27T12:49:31.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2018-03-20T14:15:54.000Z (about 8 years ago)
• Last Synced: 2025-08-14T22:32:12.392Z (10 months ago)
• Topics: blink, javascript, plugin, typewriter
• Language: JavaScript
• Homepage:
• Size: 396 KB
• Stars: 41
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
## TypeWriting.js

[![npm version](https://badge.fury.io/js/typewriting.svg)](https://badge.fury.io/js/typewriting)

![https://unsplash.com/photos/E0Spm6XXn2Y](cover.jpg)

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

[TypeWriting DEMO](http://github.eddiewen.me/TypeWriting.js/)

_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](https://github.com/EddieWen-Taiwan/TypeWriting.js/tree/jQuery-v1.1.3)._

----

### Installation

Just clone or download the zip of this repository

or via [npm](https://www.npmjs.com/package/typewriting):

~~~bash

$ yarn add typewriting

# $ npm install --save typewriting

~~~

### Setup

~~~html

~~~

or

~~~javascript

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

~~~javascript

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.

~~~javascript

typeWriting.rewrite('Welcome to TypeWriting.js', () => {

	console.log('Rewrite() is finished');

});

~~~