1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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 ChangingTitle = function () {
function ChangingTitle() {
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
_classCallCheck(this, ChangingTitle);
this.node = x;
this.letterfy(this.node.querySelector('h1'));
}
_createClass(ChangingTitle, [{
key: 'letterfy',
value: function letterfy(node) {
var text = node.innerText;
node.innerText = '';
node.classList.add('current');
for (var c in text) {
var span = document.createElement('span');
span.innerText = text[c];
span.classList.add('letter', 'in');
span.style.animationDelay = c * 0.1 + 's';
node.appendChild(span);
}
}
}, {
key: 'changeText',
value: function changeText(newText) {
var oldTitle = this.node.querySelector('.current');
var i = 0;
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = oldTitle.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var letter = _step.value;
letter.style.animationDelay = i++ * 0.1 + 's';
letter.classList.remove('in');
letter.classList.add('out');
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
oldTitle.classList.remove('current');
var newTitle = document.createElement('h1');
newTitle.classList.add('current');
for (var c in newText) {
var span = document.createElement('span');
span.innerText = newText[c];
span.classList.add('letter', 'in');
span.style.animationDelay = c * 0.1 + 0.5 + 's';
newTitle.appendChild(span);
}
this.node.appendChild(newTitle);
setTimeout(this.removeNode(oldTitle), 2000);
}
}, {
key: 'removeNode',
value: function removeNode(x) {
return function () {
x.remove();
};
}
}]);
return ChangingTitle;
}();
;
var ct = new ChangingTitle(document.querySelector('.changing-title'));
var texts = ['Hi! I am नवन'];
var count = 0;
setInterval(function () {
ct.changeText(texts[++count % texts.length]);
}, 2000);
|
