0

我在一个网站上工作，这里是它的演示 http://benseno.com.tr/demo/oto/ 我想为一个在页脚中使用 Jquery 的元素实现模糊摇晃动画，如下图所示： 在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在第一张图片中，这张橙色幻灯片出现了 然后“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>

任何建议，建议都非常感谢

4

2 回答 2

1

让我给你一些建议（在某种程度上符合 Sahil Popli 的回答）

首先，正如 Sahil 建议的那样，建议对动画使用 css3 过渡。这更好，因为支持它的浏览器会比你目前拥有的缓慢而卡顿的动画更流畅地完成工作。或者，如果您需要对动画进行更多控制，或者只是想以比当前更流畅的动画同时支持新旧浏览器，则可以使用此库。

终于到了模糊部分，我刚刚看到 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 中运行，但这需要从 a 切换HTML element到SVG element应用模糊滤镜的 a ，这反过来会导致 IE9- 错过（或者你必须使用特征检测以使用不同的版本）。（您可以使用 s 中的image标签包含位图图像svg，例如在此演示中所做的）

于 2013-03-21T13:05:24.513 回答
0

一些css可以帮助Demo：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 编辑

仅在 chrome 中尝试

于 2013-03-21T12:27:26.557 回答