Adjustments
1. To change typing speed change this number (the higher the slower):
{typeWriter(text, i + 1, fnCallback) }, 120);
2. To change the delay before animation starts again change this number:
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
Source: http://codepen.io/danielgroen/pen/VeRPOq
CSS
.centre-me H1 { font-weight: bold; text-transform: uppercase; display: block; font-size: 40px; height: 60px; } .centre-me { display: flex; align-items: center; justify-content: center; }
JS
document.addEventListener('DOMContentLoaded',function(event){ // array with texts to type in typewriter var dataText = [ "This text is...", "in Layout Javascript...", " change your text there...", " Search Engine Goes in HTML!"]; // type one text in the typwriter // keeps calling itself until the text is finished function typeWriter(text, i, fnCallback) { // chekc if text isn't finished yet if (i < (text.length)) { // add next character to h1 document.querySelector(".type-two").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>'; // wait for a while and call this function again for next character setTimeout(function() { typeWriter(text, i + 1, fnCallback) }, 120); } // text finished, call callback if there is a callback function else if (typeof fnCallback == 'function') { // call callback after timeout setTimeout(fnCallback, 700); } } // start a typewriter animation for a text in the dataText array function StartTextAnimation(i) { if (typeof dataText[i] == 'undefined'){ setTimeout(function() { StartTextAnimation(0); }, 20000); } // check if dataText[i] exists if (i < dataText[i].length) { // text exists! start typewriter animation typeWriter(dataText[i], 0, function(){ // after callback (and whole text has been animated), start next text StartTextAnimation(i + 1); }); } } // start the text animation StartTextAnimation(0); });