diff --git a/script.js b/script.js new file mode 100644 index 0000000..153bd1c --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ + // TextScramble + class TextScramble { + constructor(el) { + this.el = el + this.chars = '!<>-_\\/[]{}—=+*^?#________' + this.update = this.update.bind(this) + } + + setText(newText) { + const oldText = this.el.innerText + const length = Math.max(oldText.length, newText.length) + const promise = new Promise((resolve) => this.resolve = resolve) + this.queue = [] + for (let i = 0; i < length; i++) { + const from = oldText[i] || '' + const to = newText[i] || '' + const start = Math.floor(Math.random() * 40) + const end = start + Math.floor(Math.random() * 40) + this.queue.push({from, to, start, end}) + } + cancelAnimationFrame(this.frameRequest) + this.frame = 0 + this.update() + return promise + } + + update() { + let output = '' + let complete = 0 + for (let i = 0, n = this.queue.length; i < n; i++) { + let {from, to, start, end, char} = this.queue[i] + if (this.frame >= end) { + complete++ + output += to + } else if (this.frame >= start) { + if (!char || Math.random() < 0.28) { + char = this.randomChar() + this.queue[i].char = char + } + output += `${char}` + } else { + output += from + } + } + this.el.innerHTML = output + if (complete === this.queue.length) { + this.resolve() + } else { + this.frameRequest = requestAnimationFrame(this.update) + this.frame++ + } + } + + randomChar() { + return this.chars[Math.floor(Math.random() * this.chars.length)] + } + } + + const phrases = [ + "Hey!", + "That's my page!", + "if you like", "check out", "my social media", "below :D" + ] + + const el = document.querySelector('.text') + const fx = new TextScramble(el) + + let counter = 0 + const next = () => { + fx.setText(phrases[counter]).then(() => { + setTimeout(next, 600) + }) + counter = (counter + 1) % phrases.length + } + + next() \ No newline at end of file