jQuery 动画高斯模糊

发布于 2024-12-13 22:58:44 字数 291 浏览 0 评论 0原文

在我正在设计的网站的主页上，我希望初始英雄图像从模糊（高斯）动画到清晰。我环顾四周，惊讶地发现没有一个明显的 jQuery 解决方案可以做到这一点。我错过了什么吗？

由于我已经为网站上的其他内容加载了 jQuery 核心，因此我真的希望它能够利用 jQuery。我找到了这个示例，但它使用的是 YUI，我不想加载 YUI jQuery 的顶部就是为了这个效果。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┈┾☆殇 2024-12-20 22:58:44

如何在照片编辑程序中创建模糊效果，然后在模糊图像和非模糊图像之间淡入淡出：

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...
    });
});

这是一个 jsfiddle： http://jsfiddle.net/jasper/2FZ3Z/1/ （注意，您需要单击图像来触发从模糊到非模糊图像）。

去模糊图像的另一种方法是将相同的图像放置在其自身之上，将其移动几个像素，并更改其不透明度，以便用户可以看到下面的原始图像。然后为叠加图像设置动画。然而，这看起来更像是线性模糊而不是高斯模糊。

这是一个 jsfiddle： http://jsfiddle.net/jasper/FTt3b/ （单击图像即可制作动画消除模糊）。

How about creating your blur effect in a photo-editing program and then fading between the blurred image and the non-blurred image:

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...
    });
});

Here is a jsfiddle: http://jsfiddle.net/jasper/2FZ3Z/1/ (note you need to click on the image to trigger the transition from blurred to non-blurred image).

Another way to de-blur an image would be to position the same image over itself, move it a few pixels, and change its opacity so the user can see the original image underneath. Then animate the overlay image. This appears more like linear blur rather than Gaussian however.

Here's a jsfiddle: http://jsfiddle.net/jasper/FTt3b/ (click the image to animate away the blur).

回复收藏 0 原文