Question

我正在网站上工作，这是它的演示 http://benseno.com.tr/demo/oto/ 我希望在页脚中使用Jquery为元素实现模糊抖动动画，如下照片所示： enter image description here

enter image description here

这是第一张图片，这张橙色幻灯片来了然后“X”Div出现像图片中的动作，这就是我想要或我想做的事情，我需要你所有的建议来实现类似于这个动作的东西，你可以看到到目前为止我在演示中做了什么，向下滚动到页脚我的剧本是：

<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在我正在研究这个答案时添加了关于过滤器属性的注释，但我想扩展它。

使用-webkit-filter:blur(distance);功能确实可以在基于webkit的浏览器（chrome，safari和几个月的歌剧中）中实现模糊效果，这个问题当然仅限于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 element切换到SVG element，您将应用模糊滤镜，这反过来会导致IE9-错过（或者你必须使用特征检测来使用不同的版本）。（您可以使用image内的svg标记包含位图图像，例如this demo中所做的那样）

Answer 2

有些CSS可以提供帮助演示：http://dabblet.com/gist/5212660

.style1 
    { 
     animation-name: shake; 
     animation-duration: 0.8s; 
     transform-origin:50% 50%; 
     animation-iteration-count: infinite; 
     animation-timing-function: linear; 

     -moz-animation-name: shake; 
     -moz-animation-duration: 0.8s; 
     -moz-transform-origin:50% 50%; 
     -moz-animation-iteration-count: infinite; 
     -moz-animation-timing-function: linear; 

     -webkit-animation-name: shake; 
     -webkit-animation-duration: 0.4s; 
     -webkit-transform-origin:50% 50%; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-timing-function: linear; 
    }

    @keyframes shake{ 
     0% { transform: translate(2px, 1px) rotate(0deg);    } 
     10% { transform: translate(-1px, -2px) rotate(-1deg);  } 
     20% { transform: translate(-3px, 0px) rotate(1deg);     } 
     30% { transform: translate(0px, 2px) rotate(0deg);     } 
     40% { transform: translate(1px, -1px) rotate(1deg);     } 
     50% { transform: translate(-1px, 2px) rotate(-1deg);    } 
     60% { transform: translate(-3px, 1px) rotate(0deg);     } 
     70% { transform: translate(2px, 1px) rotate(-1deg);     } 
     80% { transform: translate(-1px, -1px) rotate(1deg);   } 
     90% { transform: translate(2px, 2px) rotate(0deg);     } 
     100% { transform: translate(1px, -2px) rotate(-1deg);     } 
    }  

    @-moz-keyframes shake{ 
     0% {   -moz-transform: translate(2px, 1px) rotate(0deg);    } 
     10% {  -moz-transform: translate(-1px, -2px) rotate(-1deg);  } 
     20% {  -moz-transform: translate(-3px, 0px) rotate(1deg);     } 
     30% {  -moz-transform: translate(0px, 2px) rotate(0deg);     } 
     40% {  -moz-transform: translate(1px, -1px) rotate(1deg);     } 
     50% {  -moz-transform: translate(-1px, 2px) rotate(-1deg);    } 
     60% {  -moz-transform: translate(-3px, 1px) rotate(0deg);     } 
     70% {  -moz-transform: translate(2px, 1px) rotate(-1deg);     } 
     80% {  -moz-transform: translate(-1px, -1px) rotate(1deg); }  
     90% {  -moz-transform: translate(2px, 2px) rotate(0deg);     } 
     100% { -moz-transform: translate(1px, -2px) rotate(-1deg);     } 
    }  

    @-webkit-keyframes shake { 
     0% {   -webkit-transform: translate(2px, 1px) rotate(0deg);  } 
     10% {  -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
     20% {  -webkit-transform: translate(-3px, 0px) rotate(1deg);   } 
     30% {  -webkit-transform: translate(0px, 2px) rotate(0deg);   } 
     40% {  -webkit-transform: translate(1px, -1px) rotate(1deg); } 
     50% {  -webkit-transform: translate(-1px, 2px) rotate(-1deg);   } 
     60% {  -webkit-transform: translate(-3px, 1px) rotate(0deg);   } 
     70% {  -webkit-transform: translate(2px, 1px) rotate(-1deg);   } 
     80% {  -webkit-transform: translate(-1px, -1px) rotate(1deg);   } 
     90% {  -webkit-transform: translate(2px, 2px) rotate(0deg);   } 
     100% { -webkit-transform: translate(1px, -2px) rotate(-1deg);   } 
    }

演示：http://dabblet.com/gist/5212660

添加模糊

使用

filter: blur(5px);
// Browser Specific
-webkit-filter: blur(35px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

喜欢

@-webkit-keyframes shake { 
         0% {   -webkit-transform: translate(2px, 1px) rotate(0deg);  -webkit-filter: blur(10px);  } 
         10% {  -webkit-transform: translate(-1px, -2px) rotate(-1deg); -webkit-filter: blur(9px); } 
         20% {  -webkit-transform: translate(-3px, 0px) rotate(1deg);   -webkit-filter: blur(8px); } 
         30% {  -webkit-transform: translate(0px, 2px) rotate(0deg);   } 
         40% {  -webkit-transform: translate(1px, -1px) rotate(1deg); } 
         50% {  -webkit-transform: translate(-1px, 2px) rotate(-1deg);   } 
         60% {  -webkit-transform: translate(-3px, 1px) rotate(0deg);   } 
         70% {  -webkit-transform: translate(2px, 1px) rotate(-1deg);   } 
         80% {  -webkit-transform: translate(-1px, -1px) rotate(1deg);   } 
         90% {  -webkit-transform: translate(2px, 2px) rotate(0deg);   } 
         100% { -webkit-transform: translate(1px, -2px) rotate(-1deg);   } 
        }

因为您需要更改值

结帐http://dabblet.com/gist/5212721

仅针对webkit进行编辑

仅在镀铬中试用

在Jquery中实现模糊摇晃

2 个答案: