Google 如何在 Google Ideas 主页上创建扭曲效果?
How do Google create the distortion effect on the Google Ideas homepage?
Google Ideas homepage 具有扭曲某些文本外观的动画和带有静态声音效果的按钮,以模拟内容从一个项目过渡到下一个项目时的信号干扰。
这是一张 Gif,以防他们更改设计:
他们是如何实现这一目标的?我可以在开发工具中看到 类 和样式跳来跳去,所以肯定涉及 JavaScript,但我找不到脚本本身的相关部分。
这并不难,尤其是 html2canvas and canvas-glitch。
基本上只需要将DOM元素转换为canvas,然后对图像数据进行操作即可实现毛刺效果。有了这两个库,这个任务就变得很简单了。
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);
});
}
});
Google Ideas homepage 具有扭曲某些文本外观的动画和带有静态声音效果的按钮,以模拟内容从一个项目过渡到下一个项目时的信号干扰。
这是一张 Gif,以防他们更改设计:
他们是如何实现这一目标的?我可以在开发工具中看到 类 和样式跳来跳去,所以肯定涉及 JavaScript,但我找不到脚本本身的相关部分。
这并不难,尤其是 html2canvas and canvas-glitch。
基本上只需要将DOM元素转换为canvas,然后对图像数据进行操作即可实现毛刺效果。有了这两个库,这个任务就变得很简单了。
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);
});
}
});