diff --git a/typing-carousel.js b/typing-carousel.js new file mode 100644 index 0000000..42c1044 --- /dev/null +++ b/typing-carousel.js @@ -0,0 +1,56 @@ +var TxtRotate = function(el, toRotate, period) { + this.toRotate = toRotate; + this.el = el; + this.loopNum = 0; + this.period = parseInt(period, 10) || 2000; + this.txt = ''; + this.tick(); + this.isDeleting = false; +}; + +TxtRotate.prototype.tick = function() { + var i = this.loopNum % this.toRotate.length; + var fullTxt = this.toRotate[i]; + + if (this.isDeleting) { + this.txt = fullTxt.substring(0, this.txt.length - 1); + } else { + this.txt = fullTxt.substring(0, this.txt.length + 1); + } + + this.el.innerHTML = ''+this.txt+''; + + var that = this; + var delta = 300 - Math.random() * 100; + + if (this.isDeleting) { delta /= 2; } + + if (!this.isDeleting && this.txt === fullTxt) { + delta = this.period; + this.isDeleting = true; + } else if (this.isDeleting && this.txt === '') { + this.isDeleting = false; + this.loopNum++; + delta = 500; + } + + setTimeout(function() { + that.tick(); + }, delta); +}; + +window.onload = function() { + var elements = document.getElementsByClassName('txt-rotate'); + for (var i=0; i