Làm cách nào để Google tạo hiệu ứng biến dạng trên trang chủ Google Ideas?

Question

Google Ideas homepage có hoạt ảnh làm méo mó sự xuất hiện của một số văn bản và nút có hiệu ứng âm thanh tĩnh, để mô phỏng nhiễu tín hiệu khi nội dung chuyển từ mục này sang mục khác.

Dưới đây là một Gif trong trường hợp họ thay đổi thiết kế:

như thế nào họ đạt được điều này? Tôi có thể thấy các lớp và phong cách nhảy xung quanh trong các công cụ dev, vì vậy JavaScript chắc chắn là có liên quan, nhưng tôi không thể tìm thấy phần có liên quan của chính kịch bản đó.

Answer 1

Không khó như vậy, đặc biệt là với html2canvas và canvas-glitch.

Về cơ bản, bạn chỉ cần chuyển đổi phần tử DOM thành canvas và sau đó điều chỉnh dữ liệu hình ảnh để đạt được hiệu ứng trục trặc. Và với hai libs này, nhiệm vụ đó trở nên khá tầm thường.

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

Bấm vào đây cho một bản demo: https://jsfiddle.net/ArtBIT/x12gvs1v/