반응형
[JQueryRotate] 이미지 회전 애니메이션
이미지를 회전하게 만들어주는 제이쿼리 플러그인입니다.
이미지를 계속 회전하게 만들 수도 있고 45도 각도로 이미지를 기울일 수도 있고
마우스 오버할 때, 또는 클릭할 때 이미지를 회전하게 만들 수 도 있죠.
여러가지 방법들이 있지만 그 중 이미지를 계속 빙글빙글 돌아가게 만드는 예제를 소개할까 합니다.
먼저 jquery plugin 파일을 다운로드 받아주세요.
jQueryRotateCompressed.js다운로드 받은 js(jQueryRotateCompressed.js)를 폴더에 넣어주시고 스크립트를 html으로 넣어줍니다.
<script src="jQueryRotateCompressed.js"></script>
그 다음 빙글빙글 돌아가게 만드는 이미지를 <body> 안에 넣어주시는데 이미지의 id값은 image로 주시고
해당 스크립트를 돌아가게 만들 스크립트 소스를 </body> 앞에 넣어줍니다.
<img src="---.jpg" id="image">
var angle = 0;
setInterval(function(){
angle+=3;
$("#image").rotate(angle);
},50);
완성된 데모페이지는 아래 URL에서 확인하실 수 있습니다.
보시는 것처럼 제이쿼리플러그인과 스크립트로 쉽고 간단하게 이미지를 회전시킬 수 있죠.
http://jsfiddle.net/xpdd0vz2/ (데모페이지)
내용을 단순하게 정리하기는 했지만 이것이 부족하다고 느끼시는 분들은
이미지를 회전시키는 다양한 방법과 응용은 참조 페이지 안에서 참고 부탁드립니다.
참조 : http://jqueryrotate.com/
반응형
'[공부]하는 몽씨 > jquery plugin' 카테고리의 다른 글
| [typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0) | 2020.04.07 |
|---|---|
| [fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2) | 2017.07.24 |
| [lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2) | 2017.06.14 |
| [animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |
| [Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션 (0) | 2017.06.08 |
