MediaWiki:Gadget-AmDyCo.js

// https://stackoverflow.com/questions/22289391/
function getLeafNodes(master) {
    var nodes = Array.prototype.slice.call(master.getElementsByTagName("*"), 0);
    var leafNodes = nodes.filter(function(elem) {
        if (elem.hasChildNodes()) {
            // see if any of the child nodes are elements
            for (var i = 0; i < elem.childNodes.length; i++) {
                if (elem.childNodes[i].nodeType == 1) {
                    // has children, not a leaf
                    return false;
                }
            }
        }
        return true;
    });
    return leafNodes;
}

function spannize(node) {
    if (node.innerText.trim() === "") {
        return;
    }
    if (node.tagName === "TEXTAREA" || node.tagName === "INPUT" || node.tagName === "OPTION" || node.tagName === "STYLE" || node.tagName === "SCRIPT") {
        return;
    }
    var text = node.textContent.split("");
    var result = "";
    text.forEach(function(char) {
        var dur = (Math.random() * 5) + 1; // range: 1 - 5
        var pick = Math.random();
        // encode the char for HTML
        char = char.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        // work only if the current char is not a space
        // for most of these, also add an invisible duplicate for spacing purposes
        if (char.trim() === "") {
            result += char;
        } else if (pick < 0.005) {
            result += "<span class=\"aprilfools-blur\" style=\"animation-duration:" + dur + "s;\">" + char + "</span>";
        } else if (pick < 0.010) {
            result += "<span class=\"aprilfools-rainbow\" style=\"animation-duration:" + dur + "s;\">" + char + "</span>";
        } else if (pick < 0.015) {
            result += "<span class=\"aprilfools-flicker\" style=\"animation-duration:" + dur + "s;\">" + char + "</span>";
        } else if (pick < 0.020) {
            result += "<span class=\"aprilfools-rise\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.025) {
            result += "<span class=\"aprilfools-fall\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.030) {
            result += "<span class=\"aprilfools-fade\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.035) {
            result += "<span class=\"aprilfools-spin\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.040) {
            result += "<span class=\"aprilfools-flipx\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.045) {
            result += "<span class=\"aprilfools-flipy\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.050) {
            result += "<span class=\"aprilfools-throb\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.055) {
            result += "<span class=\"aprilfools-shudder\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.060) {
            result += "<span class=\"aprilfools-topple\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.065) {
            result += "<span class=\"aprilfools-deflate\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.070) {
            result += "<span class=\"aprilfools-gnw\" style=\"position:absolute;text-decoration:inherit;animation-duration:" + dur + "s;\">" + char + "</span><span style=\"opacity:0;\">" + char + "</span>";
        } else if (pick < 0.075) {
            result += "<span class=\"aprilfools-ghost\" style=\"position:absolute;z-index:-1000;text-decoration:inherit;animation-duration:" + (dur * 3) + "s;\">" + char + "</span>" + char;
        } else {
            result += char;
        }
    });
    node.innerHTML = result;
}

var textNodes = getLeafNodes(document.body);
textNodes.forEach(function(node) {
    spannize(node);
});