JavaScript
8
Вклад в тег
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var TextScramble = function () {
function TextScramble(el) {
_classCallCheck(this, TextScramble);
this.el = el;
this.chars = '1234567890';
this.update = this.update.bind(this);
}
_createClass(TextScramble, [{
key: 'setText',
value: 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() * 50);
var end = start + Math.floor(Math.random() * 50);
this.queue.push({ from: from, to: to, start: start, end: end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
}, {
key: 'update',
value: 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() < 5) {
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++;
}
}
}, {
key: 'randomChar',
value: function randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}]);
return TextScramble;
}();
var phrases = ['Сначала появляется этот', 'Потом этот', 'Все с эффектами', 'И очень круто'];
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, 2000);
});
counter = (counter + 1) % phrases.length;
};
next();