Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
$(function() {
// Restrict to certain article. TO-DO: Edit to page-Kenneths_Paroxysm_Flower_Helmet.
if ($("body").hasClass("page-Flying_Clown") || $("body").hasClass("page-User_As8D")) {
// TO-DO:
// - Add effect from https://codepen.io/soulwire/pen/mErPAK
// - Add contained frame
// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————
function TextScramble(el) {
this.el = el;
this.chars = '!<>-_\\/[]{}—=+*^?#________';
this.setText = setText;
this.update = update;
this.randomChar = randomChar;
}
function setText(newText) {
var oldText = this.el.innerText;
var length = Math.max(oldText.length, newText.length);
var promise = new Promise(function(resolve) { 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;
}
function update() {
var output = '';
var complete = 0;
for (var i = 0, n = this.queue.length; i < n; i++) {
var from = this.queue[i].from,
to = this.queue[i].to,
start = this.queue[i].start,
end = this.queue[i].end,
char = this.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++;
}
}
function randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
$(".demo-text, .glitch-text").each(function() {
var lines = [];
for (var i = 0; i < 10; i++) {
if ($(this).attr("data-line" + i) !== undefined)
lines.push($(this).attr("data-line" + i));
}
var fx = new TextScramble(this);
var counter = 0;
var next = function() {
fx.setText(lines[counter]).then(function() {
setTimeout(next, 800);
});
counter = (counter + 1) % lines.length;
};
next();
});
}
});