Jquery motion blur

Question

저는 회사에서 일하고 있으며 html5에서 플래시 광고 배너를 변환하고 있습니다.

왼쪽에서 슬라이드하는 플래시 이미지를 변환해야하며 동시에 바람이 부는 효과처럼 모션 블러 효과를 수행해야합니다.

슬라이드에서 이미지를 변환했지만 바람이 잘가는 효과를 추가하는 방법을 모르겠습니다.

여기는 car image입니다. 복사하고 싶습니다. 내 코드는 jsfiddle 미리 감사드립니다.

HTML

<div id = "wrapper" >  
<div id="mainContainer"> 
    <div id="text"> 
     <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" /> 
    </div> 
</div> 
</div> 

CSS

#wrapper { 
    left: 50px; 
    top: 50px; 
    width: 300px; 
    height:250px; 
    position: absolute; 
} 
#mainContainer { 
    background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif'); 
    width:300px; 
    height:250px; 
    overflow: hidden; 
    position: absolute; 
} 
#Image_Car { 
    position:absolute; 
    overflow: hidden; 
    margin:60px 8px; 
    left: -120px; 
} 

jQuery를

$(document).ready(function() { 
    bannerAnimation(); 
}); 

function bannerAnimation() { 
    //Jquery Animation 
    $("#Image_Car").animate({ 
     left: "30" 
    }, 500, function() { 
     $("#Image_Car").animate({ 
      left: "10" 
     }, 200); 
    }); 
} 

Answer 1

이것은 아주 좋은 플러그인입니다 : 이 DEMO

plugin

Answer 2

jQuery를 사용하면 거의 아무도 사용하지 않는 캔버스를 사용하지 않는 한 모션 블러를 만들 수 있도록 도와 않을 것입니다 광고 작성,

또는,

이미지의 여러 인스턴스를 만들고 같은 위치에 배치 한 다음 약간의 시간 간격 및 불투명도로 각각 애니메이션을 만들 수 있습니다.