javascript - Jak Google vytváří efekt zkreslení na domovské stránce Google Ideas?

Domovská stránka Google Ideas obsahuje animaci, která deformuje vzhled některého textu, a tlačítko s neměnným zvukovým efektem, aby simulovala rušení signálu při přechodu obsahu z jedné položky na druhou.

Tady je gif pro případ, že změní design:

Jak toho dosahují? Ve vývojářských nástrojích vidím, že se přeskakují třídy a styly, takže JavaScript je rozhodně zapojen, ale nemohu najít samotnou relevantní část skriptu.

Odpověď č. 1

Není to tak těžké, zvlášť s html2canvas a canvas-glitch.

V podstatě stačí převést DOM element na canvas a pak manipulovat s obrazovými daty, aby se dosáhlo glitch efektu. A s těmito dvěma knihovnami se tento úkol stává docela jednoduchým.

html2canvas(node, {
    onrendered: function (canvas) {
        // hide the original node
        node.style.display = "none";
        // add the canvas node to the node's parent
        // practically replacing the original node
        node.parentNode.appendChild(canvas);
        // get the canvas' image data
        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // glitch it
        var parameters = { amount: 1, seed: Math.round(Math.random()*100), iterations: 5, quality: 30 };
        glitch(imageData, parameters, function(imageData) {
            // update the canvas' image data
            ctx.putImageData(imageData, 0, 0);
        });
    }
});

Klikněte zde pro ukázku: https://jsfiddle.net/ArtBIT/x12gvs1v/