'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } // 鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€ // TextScramble // 鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€ var TextScramble = function () { function TextScramble(el) { _classCallCheck(this, TextScramble); this.el = el; this.chars = '!<>-_\\/[]{}鈥擙+*^?#________'; this.update = this.update.bind(this); } TextScramble.prototype.setText = function setText(newText) { var _this = this; var oldText = this.el.innerText; var length = Math.max(oldText.length, newText.length); var promise = new Promise(function (resolve) { return _this.resolve = resolve; }); this.queue = []; for (var i = 0; i < length; i++) { var from = oldText[i] || ''; var to = newText[i] || ''; var start = Math.floor(Math.random() * 40); var end = start + Math.floor(Math.random() * 40); this.queue.push({ from: from, to: to, start: start, end: end }); } cancelAnimationFrame(this.frameRequest); this.frame = 0; this.update(); return promise; }; TextScramble.prototype.update = function update() { var output = ''; var complete = 0; for (var i = 0, n = this.queue.length; i < n; i++) { var _queue$i = this.queue[i]; var from = _queue$i.from; var to = _queue$i.to; var start = _queue$i.start; var end = _queue$i.end; var char = _queue$i.char; 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(); var evt = document.createEvent("HTMLEvents"); evt.initEvent("scrambled", false, true); this.el.dispatchEvent(evt); } else { this.frameRequest = requestAnimationFrame(this.update); this.frame++; } }; TextScramble.prototype.randomChar = function randomChar() { return this.chars[Math.floor(Math.random() * this.chars.length)]; }; return TextScramble; }(); // 鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€ // Example // 鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€ // var phrases = ['Neo,', 'sooner or later', 'you\'re going to realize', 'just as I did', 'that there\'s a difference', 'between knowing the path', 'and walking the path']; // var el = document.querySelector('.text'); // var fx = new TextScramble(el); // var counter = 0; // var next = function next() { // fx.setText(phrases[counter]).then(function () { // setTimeout(next, 800); // }); // counter = (counter + 1) % phrases.length; // }; // next();