// DISCLAIMER: This function does require jQuery. I've used it here because the project I'm building this for already uses jQuery, so I thought why not. It can be modified quite simply to be done in raw JavaScript. Just thought I'd let you know. // This is the funtion you need to copy // Copy from line 9 to 34 function autoType(elementClass, typingSpeed){ var thhis = $(elementClass); thhis.css({ "position": "relative", "display": "inline-block" }); thhis.prepend('
'); thhis = thhis.find(".text-js"); var text = thhis.text().trim().split(''); var amntOfChars = text.length; var newString = ""; thhis.text("|"); setTimeout(function(){ thhis.css("opacity",1); thhis.prev().removeAttr("style"); thhis.text(""); for(var i = 0; i < amntOfChars; i++){ (function(i,char){ setTimeout(function() { newString += char; thhis.text(newString); },i*typingSpeed); })(i+1,text[i]); } },1500); } $(document).ready(function(){ // Now to start autoTyping just call the autoType function with the // class of outer div // The second paramter is the speed between each letter is typed. autoType(".type-js",200); console.log('dom loaded!'); });