javascript - 在 Jquery 中实现模糊摇动

Question

我正在做一个网站，这是它的演示 http://benseno.com.tr/demo/oto/ 我想为页脚中带有 Jquery 的元素实现模糊摇晃动画，如照片所示:

在第一张图片中，这张橙色幻灯片来自 然后“X”Div 出现在类似于图片中的 Action 中，这就是我所缺少的或我想要做的，我需要你的所有建议来实现与此 Action 类似的东西，你可以在演示中看到我到目前为止所做的，向下滚动到页脚 我的脚本是:

<script type="text/javascript">
    $(window).scroll(function() {
        if ($(window).scrollTop() > 700) {
            $('#footer_img').animate({
                'background-position' : '300px'
            }, 500, 'linear', function() {
                $('#footer_x').fadeIn(10);
                $('#footer_x').animate({
                    'width' : '201px',
                    'height' : '217px'
                }, 200, 'linear');

                $('#footer_x').effect('shake', {
                    times : 1,
                    direction : 'down',
                    distance : 3
                }, 50);

            });

        }
        if ($(window).scrollTop() == 0) {
            $('#footer_img').animate({
                'background-position' : '900px'
            }, 1000, 'linear');
            $('#footer_x').fadeOut(100);
        }
    });
</script>

非常感谢任何建议，建议

Answer 1

让我给你一些建议(在某种程度上与 Sahil Popli 的回答一致)

首先，正如 Sahil 所建议的那样，建议对动画使用 css3 过渡。这更好，因为支持它的浏览器将比您当前拥有的缓慢且断断续续的动画更流畅地工作。或者你可以使用 this如果您需要对动画进行更多控制，或者只是想以比当前更流畅的动画来支持旧版和新版浏览器，则可以使用该库。

终于到了模糊部分，我刚刚看到 Sahil 在我处理这个答案时添加了关于 filter 属性的注释，但我想对此进行扩展。

模糊效果确实可以在基于webkit的浏览器(chrome、safari和几个月后的opera)中使用-webkit-filter:blur(distance);函数实现，问题当然，这仅限于 webkit。然而，Gecko (firefox) 不支持 blur 函数，但它允许您使用 url() 资源引用 svg 过滤器。这听起来可能很复杂，但您唯一需要做的就是在您的 css 旁边添加以下文件

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur" x="0" y="0">
      <!-- Change stdDeviation for different amounts of blur -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
  </defs>
</svg>

而不是使用 blur 函数，您现在可以使用

-webkit-filter:url(filter.svg#blur);
filter:url(filter.svg#blur);

这将适用于 firefox、safari 和 chrome。这样做的缺点是，与 blur 函数不同，它不能使用 css3 或 javascript 进行转换，因此您只能打开和关闭效果(尽管您可以制作一个通过向您的 svg 文件添加更多模糊元素来增加阶段数)。

现在，旧的 IE 版本(IE9 及以下)也有一个专有的 filter 属性，它也可以用来添加模糊效果，所以通过添加以下内容

-webkit-filter:url(filter.svg#blur);
filter:url(filter.svg#blur);
zoom:1;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='false', ShadowOpacity='0')

在除 IE10+ 之外的所有主流浏览器中都会有模糊效果。现在，也可以让它在 IE10 中工作，但这需要从 HTML 元素 切换到 SVG 元素你会应用模糊过滤器，这反过来会导致 IE9- 错过(或者你必须使用特征检测来使用不同的版本)。 (您可以使用 svg 中的 image 标签包含位图图像，例如 this demo 中所做的)