Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140220

How do I freeze on the last line of text and not repeat with this Typewriter effect?

$
0
0

Currently the animation begins to type out each line, deletes then moves on typing the next. Trying to freeze the animation after typing out the last line "Text Line 3" and stay as that. Which part of the code do I change to achieve that?

This typewriter effect uses JavaScript instead of CSS. Please help. Thank you!!!

var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3"
];

var _PART = 0;

var _PART_INDEX = 0;

var _INTERVAL_VAL;

var _ELEMENT = document.querySelector("#text");

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

function Type() { 
	var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
	_ELEMENT.innerHTML = text;
	_PART_INDEX++;

   
	if(text === _CONTENT[_PART]) {
	
		_CURSOR.style.display = 'none';

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


function Delete() {
	
	var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
	_ELEMENT.innerHTML = text;
	_PART_INDEX--;


	if(text === '') {
		clearInterval(_INTERVAL_VAL);

	to the next
		if(_PART == (_CONTENT.length - 1))
			_PART = 0;
		else
			_PART++;
		
		_PART_INDEX = 0;

		
		setTimeout(function() {
			_CURSOR.style.display = 'inline-block';
			_INTERVAL_VAL = setInterval(Type, 100);
		}, 200);
	}
}

 
_INTERVAL_VAL = setInterval(Type, 100);
#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: blue;
	animation: blink .75s step-end infinite;
}

@keyframes blink {
	from, to { 
		background-color: transparent 
	}
	50% { 
		background-color: blue; 
	}
}
<div id="container"><div id="text"></div><div id="cursor"></div></div>

Viewing all articles
Browse latest Browse all 140220


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>