KennethsParoxysmFlowerHelmet.js

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
        // ——————————————————————————————————————————————————
        
        class TextScramble {
          constructor(el) {
            this.el = el
            this.chars = '!<>-_\\/[]{}—=+*^?#________'
            this.update = this.update.bind(this)
          }
          setText(newText) {
            const oldText = this.el.innerText
            const length = Math.max(oldText.length, newText.length)
            const promise = new Promise((resolve) => this.resolve = resolve)
            this.queue = []
            for (let i = 0; i < length; i++) {
              const from = oldText[i] || ''
              const to = newText[i] || ''
              const start = Math.floor(Math.random() * 40)
              const end = start + Math.floor(Math.random() * 40)
              this.queue.push({ from, to, start, end })
            }
            cancelAnimationFrame(this.frameRequest)
            this.frame = 0
            this.update()
            return promise
          }
          update() {
            let output = ''
            let complete = 0
            for (let i = 0, n = this.queue.length; i < n; i++) {
              let { from, to, start, end, char } = this.queue[i]
              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++
            }
          }
          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();
        });
    }
});