Typing and Deleting Effect with Javascript

Typing effect is a good way to grab user attention. Mostly used in hero sections of a page, it makes sure that the user gets to know some special points about the website.

Demo

The demo will work in case there are multiple lines also.

Implementing Typing Effect

To implement typing effect of a sentence, you can start by showing the first character initially; after a few milliseconds you can show the first 2 characters; then a few milliseconds later you can show the first 3 characters; and so on till the whole sentence has been shown.

substring method can be used to get the substring of a sentence.

setInterval method can be used to keep adding characters at regular intervals.

Implementing Deleting Effect

To implement deleting effect of a sentence, you can start by showing the full sentence; after a few milliseconds you can the remove the last character; then after a few milliseconds you can remove the last 2 characters; and so on till all characters in the sentence have been deleted.

Complete Codes

HTML

<div id="container">
	<div id="text"></div><div id="cursor"></div>
</div>

Note that there is a separate element that acts as a cursor. A separate element ensures that the cursor will be seen even if the text spans multiple lines.

CSS

#container {
	text-align: center;
}

#text {
	display: inline-block;
	vertical-align: middle;
	color: orange;
	letter-spacing: 2px;
}

#cursor {
	display: inline-block;
	vertical-align: middle;
	width: 3px;
	height: 50px;
	background-color: orange;
	animation: blink .75s step-end infinite;
}

@keyframes blink {
	from, to { 
		background-color: transparent 
	}
	50% { 
		background-color: orange; 
	}
}

An animation has been added to the cursor element, giving it a blinking effect (by animating the background-color property : from a given color to "transparent").

Javascript

// List of sentences
var _CONTENT = [ 
	"Twinkle, twinkle, little star", 
	"How I wonder what you are", 
	"Up above the world so high", 
	"Like a diamond in the sky"
];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() { 
	// Get substring with 1 characater added
	var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
	_ELEMENT.innerHTML = text;
	_PART_INDEX++;

	// If full sentence has been displayed then start to delete the sentence after some time
	if(text === _CONTENT[_PART]) {
		// Hide the cursor
		_CURSOR.style.display = 'none';

		clearInterval(_INTERVAL_VAL);
		setTimeout(function() {
			_INTERVAL_VAL = setInterval(Delete, 50);
		}, 1000);
	}
}

// Implements deleting effect
function Delete() {
	// Get substring with 1 characater deleted
	var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
	_ELEMENT.innerHTML = text;
	_PART_INDEX--;

	// If sentence has been deleted then start to display the next sentence
	if(text === '') {
		clearInterval(_INTERVAL_VAL);

		// If current sentence was last then display the first one, else move to the next
		if(_PART == (_CONTENT.length - 1))
			_PART = 0;
		else
			_PART++;
		
		_PART_INDEX = 0;

		// Start to display the next sentence after some time
		setTimeout(function() {
			_CURSOR.style.display = 'inline-block';
			_INTERVAL_VAL = setInterval(Type, 100);
		}, 200);
	}
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);

Using only CSS ?

It is also possible to achieve a typing effect with only CSS. See this tutorial for more on this.