W jaki sposób Google tworzy efekt zniekształceń na stronie głównej Google Ideas?

Question

The Google Ideas homepage zawiera animację, która zniekształca wygląd niektórych tekstu i przycisku ze statycznym efektem dźwiękowym, w celu symulacji zakłóceń sygnału, gdy treść przechodzi z jednego elementu do drugiego.

Oto Gif w przypadku ich zmiany projektu:

Jak są osiągnięcia tego celu? Widzę klasy i style poruszające się w narzędziach programistycznych, więc JavaScript jest zdecydowanie zaangażowany, ale nie mogę znaleźć odpowiedniej sekcji samego skryptu.

Answer 1

To nie jest trudne, szczególnie z html2canvas i canvas-glitch.

Zasadniczo wystarczy przekonwertować element DOM na płótno, a następnie manipulować danymi obrazu, aby uzyskać efekt usterki. I przy tych dwóch bibliotekach zadanie to staje się dość banalne.

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); 
     }); 
    } 
}); 

Kliknij tutaj demo: https://jsfiddle.net/ArtBIT/x12gvs1v/