In che modo Google crea l'effetto di distorsione sulla home page di Google Ideas?

Question

Il Google Ideas homepage dispone di un'animazione che distorce l'aspetto di parte del testo e un pulsante con un effetto sonoro statico, al fine di simulare l'interferenza del segnale quando il contenuto passa da un elemento all'altro.

Ecco una Gif nel caso in cui cambiare il design:

Come sono raggiungimento di questo? Riesco a vedere le classi e gli stili saltare negli strumenti di sviluppo, quindi JavaScript è sicuramente coinvolto, ma non riesco a trovare la sezione di script pertinente.

Answer 1

Non è così difficile, soprattutto con html2canvas e canvas-glitch.

Fondamentalmente è sufficiente convertire l'elemento DOM in tela e quindi manipolare i dati dell'immagine per ottenere l'effetto glitch. E con queste due librerie, questo compito diventa piuttosto banale.

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

Clicca qui per una demo: https://jsfiddle.net/ArtBIT/x12gvs1v/