객체 떨림 효과

엘리먼트를 덜덜 떨리게 하는 jQuery 플러그인을 소개한다.

jRumble 플러그인이다.

http://jackrugile.com/jrumble/

위 사이트에 접속하면 친절하게 데모들과 도큐먼트가 정리 되어 있다.

기본적인 사용방법을 알아보자.

먼저 jquery1.7.2 이상의 버전과 jrumble 최신버전(현재는 1.3)을 불러온다.

<script type="text/javascript" src="js/https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>

<div id="text1">흔들림 테스트</div>

<script>

$('#text1').jrumble({

x: 2,

y: 2,

rotation: 2

});

$('#text1').hover(function(){

$(this).trigger('startRumble');

}, function(){

$(this).trigger('stopRumble');

});

</script>

위처럼 코드를 실행한 후, '흔들림 테스트' 라는 글자위에 마우스를 대보자.

자연스럽게 떨림 효과가 실행된다.

필자가 테스트 해 본 결과, jrumble을 사용할 때 주의할 점이 하나 있는데,

바로 css3 애니메이션효과 (transition, transform 등등)와 함께 사용한다면 jrumble이 실행되지 않는다는 것이다.

쉽게 설명해서 css3로 fadein 효과를 주고, jrumble로 떨림 효과를 줘서 객체가 서서히 나타나면서 떨리게 하는것은 불가능 하다는 얘기다.

위 표는 jrumble 의 간단한 옵션표이다.

자세한 설정과 코딩 데모들은 사이트를 참조하기 바란다.