javascript - Jqueryでぼやけた揺れを実現する

Question

私はウェブサイトに取り組んでおり、ここにそのデモがあります 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>

任意の提案、アドバイスをいただければ幸いです

score 1 · Accepted Answer

いくつかのアドバイスをさせてください（Sahil Popliの答えとある程度一致しています）

まず第一に、Sahil が提案しているように、アニメーションには css3 トランジションを使用することをお勧めします。これをサポートするブラウザーは、現在の遅くてぎこちないアニメーションよりもはるかにスムーズに動作するため、これは優れています. 代わりに、アニメーションをより詳細に制御する必要がある場合、または現在よりもスムーズなアニメーションで古いブラウザーと新しいブラウザーの両方をサポートしたい場合に、このライブラリを使用できます。

最後にぼかしの部分に到達すると、この回答に取り組んでいる間に Sahil がフィルタープロパティに関するメモを追加したのを見ましたが、それについて詳しく説明したいと思います。

この関数を使用して、Webkit ベースのブラウザー (chrome、safari、および数か月後に Opera も同様) でぼかし効果を実際に実現できます-webkit-filter:blur(distance);。ただし、Gecko (firefox) はこの機能をサポートしていませんが、リソースblurを使用して svg フィルターを参照できます。url()これは複雑に聞こえるかもしれませんが、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で行われているように、s内のタグを使用してビットマップイメージを含めることができます)svg

score 0 · Accepted Answer

一部の 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用にのみ編集

クロムのみで試してください

javascript - Jqueryでぼやけた揺れを実現する

2 に答える 2

Related

Reference