본문 영역
손쉬운 애니메이션 효과(ani_type) 상세보기
작성자: 관리자
추천: 0 조회: 1111983
손쉬운 애니메이션 효과(ani_type)
ani_type="효과"
몽9빌더에서는 ani_type이라는 가상의 HTML 태그속성이 존재합니다. animate type 의 줄임말로 애니메이션 종류 정도로 생각하시면 됩니다.
개발자는 손쉽게 ani_type속성을 이용해 다양한 애니메이션을 자바스크립트 호출없이 손쉽게 구현 할 수 있습니다.
<img src="..." ani_type="효과">
<div ani_type="효과"></div>
<input type="button" ani_type="효과">
<div ani_type="효과"></div>
<input type="button" ani_type="효과">
원리
페이지가 로딩되면, 페이지 내 모든 요소에 대해 ani_type 체크가 이루어집니다.
해당요소에 ani_type 속성이 존재하면, 해당 속성의 *.js 파일 자동로딩 & 적용됩니다.
-
장점 : 손쉽게 작성 할 수 있다.
수많은 HTML 태그를 구분하기 위해 무분별하게 키 값을 지정하고, 이를 셀렉트하여 동적으로 데이터를 변경하는 코드가 난무함으로써 뷰와 로직의 코드가 혼재되어 개발 및 유지보수의 어려움이 따릅니다.
ani_type은 이러한 뷰와 로직의 구분을 명확하게 해주며, 보다 직관적으로 개발자 관점에서 쉽게 애니메이션을 구현할 수 있습니다.
기본 효과들
아래의 애니메이션은 마우스 오버/아웃 이벤트에 자동 애니메이션 효과를 줍니다.
오브젝트가 흔들리거나, 회전하기 때문에 마우스 오버/아웃 효과가 중복되어 이상한 행동을 보일 수 있어, 반드시 마우스 오버 이벤트가 끝나야 마우스 아웃 효과가 성립되도록 설계되었습니다.
쉽게 말해, 바운드 효과는 마우스 오버시 0.8초 동안 애니메이션 됩니다. 이 0.8초 동안 마우스 아웃 이벤트가 나타나게 되면 이를 무시합니다. 멈춘 후에 적용된다는 뜻입니다.
<style>
/* 예제에 사용되는 스타일 */
.d_box1, .d_box2, .d_box3{
font-size:15pt;font-family:Arial;text-align:center;
border:1px solid #CCCCCC;background:orange;
float:left;margin-left:50px;
}
.d_box1{width:100px;height:100px;line-height:100px}
.d_box2{width:150px;height:100px;line-height:100px}
.d_box3{width:100px;height:150px;line-height:150px}
</style>
1. flash(반짝)
반짝이는 효과
<div ani_type="flash"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="flash">flash</div>
<div class="d_box2" ani_type="flash">flash</div>
<div class="d_box3" ani_type="flash">flash</div>
flash
flash
flash
-
마우스 오버시(mouseover)
0.2초 동안, 알파값을 100% → 30% → 100%로 변화시킵니다. (반짝효과)
2. fade
페이드(서서히 나타남/사라짐) 효과
<div ani_type="fade"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="fade">fade</div>
<div class="d_box2" ani_type="fade">fade</div>
<div class="d_box3" ani_type="fade">fade</div>
fade
fade
fade
-
마우스 오버시(mouseover)
0.3초 동안, 알파값을 50%로 줄입니다.
-
마우스 아웃시(mouseout)
0.2초 동안, 알파값을 100%로 변화시킵니다. (복귀)
3. bounce(바운드)
공을 튀기는 효과
<div ani_type="bounce"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="bounce">bounce</div>
<div class="d_box2" ani_type="bounce">bounce</div>
<div class="d_box3" ani_type="bounce">bounce</div>
bounce
bounce
bounce
-
마우스 오버시(mouseover)
0.8초 동안, 높이의 1/3을 바운딩(3회) 시킵니다.
-
마우스 아웃시(mouseout)
0.4초 동안, 높이의 1/5을 바운딩(2회) 시킵니다.
4. shake(흔들기)
좌우로 흔드는 효과
<div ani_type="shake"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="shake">shake</div>
<div class="d_box2" ani_type="shake">shake</div>
<div class="d_box3" ani_type="shake">shake</div>
shake
shake
shake
-
마우스 오버시(mouseover)
0.8초 동안, 높이의 1/20을 흔들기(3회) 시킵니다.
-
마우스 아웃시(mouseout)
0.4초 동안, 높이의 1/30을 흔들기(2회) 시킵니다.
5. scale(크기)
크기 변환(튀어나오는) 효과
<div ani_type="scale"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="scale">scale</div>
<div class="d_box2" ani_type="scale">scale</div>
<div class="d_box3" ani_type="scale">scale</div>
scale
scale
scale
-
마우스 오버시(mouseover)
0.5초 동안, 크기를 120%로 변경합니다.
-
마우스 아웃시(mouseout)
0.3초 동안, 크기를 100%로 변경합니다.(복귀)
※주의: 크기(scale)효과는 익스플로러7에서는 지원하지 않아, 페이드[fade]효과로 대처됩니다
6. rotate(회전)
회전 효과
<div ani_type="rotate"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="rotate">rotate</div>
<div class="d_box2" ani_type="rotate">rotate</div>
<div class="d_box3" ani_type="rotate">rotate</div>
rotate
rotate
rotate
-
마우스 오버시(mouseover)
0.3초 동안, 시계방향으로 회전(360 °) 시킵니다.
-
마우스 아웃시(mouseout)
0.2초 동안, 시계반대방향으로 회전(360 °) 시킵니다.
※주의: 회전(rotate)효과는 익스플로러7에서는 지원하지 않아, 페이드[fade]효과로 대처됩니다
7. vflip(수직 뒤집기)
수직 뒤집기 효과
<div ani_type="vflip"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="vflip">vflip</div>
<div class="d_box2" ani_type="vflip">vflip</div>
<div class="d_box3" ani_type="vflip">vflip</div>
vflip
vflip
vflip
-
마우스 오버시(mouseover)
0.6초 동안, 2회 수직 뒤집기합니다.
-
마우스 아웃시(mouseout)
0.3초 동안, 2회 수직 뒤집기합니다.
※주의: 수직 뒤집기(vflip)효과는 익스플로러7에서는 지원하지 않아, 페이드[fade]효과로 대처됩니다
8. hflip(수평 뒤집기)
수평 뒤집기 효과
<div ani_type="hflip"></div>
<!--// 실행코드 //-->
<div class="d_box1" ani_type="hflip">hflip</div>
<div class="d_box2" ani_type="hflip">hflip</div>
<div class="d_box3" ani_type="hflip">hflip</div>
hflip
hflip
hflip
-
마우스 오버시(mouseover)
0.6초 동안, 2회 수평 뒤집기합니다.
-
마우스 아웃시(mouseout)
0.3초 동안, 2회 수평 뒤집기합니다.
※주의: 수평 뒤집기(hflip)효과는 익스플로러7에서는 지원하지 않아, 페이드[fade]효과로 대처됩니다
관련 글&정보
-
테스트 브라우저
익스플로러(6.02), 크롬(22), 파이어폭스(15.0), 오페라(12.02), 사파리(5.1.2)
-
손쉬운 애니메이션 효과(ani_type) 응용하기
-
Jquery Effect : http://jqueryui.com/effect/
bounce, shake는 jquery.ui.effect 을 응용한 것입니다.
-
참고 : https://github.com/louisremi/jquery.transform.js
rotate, vflip, hflip은 transform2d.js를 응용한 것입니다.
-
위 애니메이션은 사용할 때만 응용 소스를 자동로딩합니다.(사용하지 않을 경우 로딩하지 않음)
등록일:
마지막 수정일:
자바스크립트(JS)
총글수: 18
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 18 | 없음 | int_utils.js | 추천:0 | 조회:4245 | |
| 17 | 없음 | 현재글:손쉬운 애니메이션 효과(ani_type) | 추천:0 | 조회:1111983 | |
| 16 | 없음 | 손쉬운 애니메이션 효과(ani_type) 응용하기 | 추천:0 | 조회:16218 | |
| 15 | 없음 | 색상전환 효과(ani_type="color") | 추천:0 | 조회:15471 | |
| 14 | 없음 | alt/title 속성 제어(툴팁) | 추천:0 | 조회:5101 | |
| 13 | 없음 | MOVIE 애니메이션(flash 대용) | 추천:0 | 조회:11413 | |
| 12 | 없음 | M9SLIDE(슬라이드) 애니메이션 | 추천:0 | 조회:9877 | |
| 11 | 없음 | M9SLIDE 애니메이션:fade 효과 | 추천:0 | 조회:11142 | |
| 10 | 없음 | M9SLIDE 애니메이션:slide 효과 | 추천:0 | 조회:25144 | |
| 9 | 없음 | M9SLIDE 애니메이션:slice 효과 | 추천:0 | 조회:6680 |
