Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- '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 += '<span class="dud">' + char + '</span>';
- } else {
- output += from;
- }
- }
- this.el.innerHTML = output;
- if (complete === this.queue.length) {
- this.resolve();
- } 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();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement