43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
// 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('<div class="cursor" style="right: initial; left:0;"></div>');
|
|
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!');
|
|
});
|