Created
February 9, 2018 17:03
-
-
Save tomwray13/f9337d10502757af8ff060fc45d6c265 to your computer and use it in GitHub Desktop.
Typewriter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var TxtType = 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; | |
}; | |
TxtType.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 = '<span class="wrap">'+this.txt+'</span>'; | |
var that = this; | |
var delta = 200 - 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('typewrite'); | |
for (var i=0; i<elements.length; i++) { | |
var toRotate = elements[i].getAttribute('data-type'); | |
var period = elements[i].getAttribute('data-period'); | |
if (toRotate) { | |
new TxtType(elements[i], JSON.parse(toRotate), period); | |
} | |
} | |
// INJECT CSS | |
var css = document.createElement("style"); | |
css.type = "text/css"; | |
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}"; | |
document.body.appendChild(css); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment