Created
June 20, 2019 13:54
-
-
Save cluzier/228de905ec3c24bec6253af0badac1a4 to your computer and use it in GitHub Desktop.
thinking..
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
| <!-- | |
| hardships, breakups, whatever it may be, are all part of life. people come and go but those who stay are the ones worth saying 'i love you' to. dont take anyone for granted, live life to the fullest. | |
| to the one who broke my heart. i still love you. | |
| --> | |
| <h1> | |
| <a class="typewrite" | |
| data-type='[ "i love you", | |
| "i like you", | |
| "i knew you", "hi" | |
| ]'> | |
| </a> | |
| </h1> |
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"; | |
| document.body.appendChild(css); | |
| }; |
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
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| background-color:#f6f6f6; | |
| color:#000; | |
| } | |
| .typewrite > .wrap { | |
| color: #000; | |
| font-family: 'Swanky and Moo Moo', cursive; | |
| } | |
| * { | |
| color:#000; text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment