본문 영역
손쉬운 애니메이션 효과(ani_type) 응용하기 상세보기
작성자: 관리자
추천: 0 조회: 16527
손쉬운 애니메이션 효과(ani_type) 응용하기
손쉬운 애니메이션 효과(ani_type)
를 이 문서 전에 읽지않았다면 손쉬운 애니메이션 효과(ani_type) 문서부터 보신후 이 글을 읽어 주십시오.
를 이 문서 전에 읽지않았다면 손쉬운 애니메이션 효과(ani_type) 문서부터 보신후 이 글을 읽어 주십시오.응용방법
ani_type 애니메이션 효과의 목적은 아주 단순하게 애니메이션을 주기 위함이지만, 코드의 효율성 차원에서 속성을 부여하여 좀 복잡해지지만 다양하게 애니메이션 효과를 주실 수 있습니다.
1) 중복사용
ani_type 속성을 세미콜론(;)으로 여러개 줄 수 있습니다. (모두 가능한 것은 아님)
<div ani_type="fade;bounce"></div> <!--// fade와 bounce 두개의 효과를 줌 //-->
2) 변수사용
ani_type 속성에 변수를 주어 애니메이션을 변경(응용) 할 수 있습니다. 이 변수는 연관배열(해쉬값)로 작성합니다.
{변수명:값,변수명:값,변수명:값}
<div ani_type="flash(a_opacity:30,a_time:200)"></div> <!--// opacity,a_time 속성 변경 //-->
<div ani_type="flash(a_opacity:30,a_time:200)"></div> <!--// opacity,a_time 속성 변경 //-->
-
1
접두사(a_) 로 시작하는 변수는 mouseover 관련 변수이다.
-
2
접두사(o_) 로 시작하는 변수는 mouseout 관련 변수이다.
-
3
시간의 단위는 1/1000초이다.(1초는 1000)
3) 자바스크립트 안에서 사용
본인의 자바스크립트 안에서 속성을 부여할 수 있습니다.
ANI.효과명(적용ID);
ex) ANI.run("bounce","box"); // id="box"인 객체에 바운드 효과 적용
ANI.효과명(적용ID,속성변수);
ex) ANI.run("fade","box",{a_time:50,o_time:80}); // id="box"인 객체에 속성을 변경한 페이드 효과 적용
ex) ANI.run("bounce","box"); // id="box"인 객체에 바운드 효과 적용
ANI.효과명(적용ID,속성변수);
ex) ANI.run("fade","box",{a_time:50,o_time:80}); // id="box"인 객체에 속성을 변경한 페이드 효과 적용
1. flash(반짝)
반짝이는 효과
<div ani_type="flash(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_opacity | mouseover | 30 | 투명도(0 ~ 100) |
| a_time | mouseover | 200 | 실행시간(0.2초) |
예제
2. fade
페이드(서서히 나타남/사라짐) 효과
<div ani_type="fade(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_opacity | mouseover | 50 | 투명도(0 ~ 100) |
| a_time | mouseover | 300 | 실행시간(0.3초) |
| a_easing | mouseover | linear | 애니메이션 형태 |
| o_opacity | mouseout | 100 | 투명도(0 ~ 100) |
| o_time | mouseout | 200 | 실행시간(0.2초) |
| o_easing | mouseout | linear | 애니메이션 형태 |
예제
fade
fade
fade
mouseover 효과
: : :
mouseout 효과
: : :
fade 효과초기값 복원
o_opacity 는 마우스 아웃일때의 투명도입니다. 그래서 페이지 로딩되면 자동으로 o_opacity 값으로 설정됩니다.
<a class="button orange" ani_type="fade">fade</a>
<a class="button orange" ani_type="fade(o_opacity:60)">fade(o_opacity:60)</a>
<a class="button orange" ani_type="fade(o_opacity:30)">fade(o_opacity:30)</a>
fade fade(o_opacity:60) fade(o_opacity:30)
3. bounce(바운드)
공을 튀기는 효과
<div ani_type="bounce(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_direction | mouseover | up | 방향(up,down,left,right) |
| a_distance | mouseover | undefined | 거리(높이의 1/3) |
| a_bounce | mouseover | 3 | 바운드 수 |
| a_time | mouseover | 800 | 실행시간(0.8초) |
| o_direction | mouseout | up | 방향(up,down,left,right) |
| o_distance | mouseout | undefined | 거리(높이의 1/3) |
| o_bounce | mouseout | 2 | 바운드 수 |
| o_time | mouseout | 400 | 실행시간(0.4초) |
예제
4. shake(흔들기)
좌우로 흔드는 효과
<div ani_type="shake(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_direction | mouseover | both | 방향(both,up,down,left,right) |
| a_distance | mouseover | undefined | 거리(넓이이의 1/20) |
| a_shake | mouseover | 3 | 흔들기 수 |
| a_time | mouseover | 800 | 실행시간(0.8초) |
| o_direction | mouseout | both | 방향(both,up,down,left,right) |
| o_distance | mouseout | undefined | 거리(넓이의 1/30) |
| o_shake | mouseout | 2 | 흔들기 수 |
| o_time | mouseout | 400 | 실행시간(0.4초) |
예제
5. scale(크기)
크기 변환(튀어나오는) 효과
<div ani_type="scale(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_scale | mouseover | 120 | 스케일(크기) |
| a_time | mouseover | 500 | 실행시간(0.5초) |
| a_easing | mouseover | easeOutBounce | 애니메이션 형태 |
| o_scale | mouseout | 100 | 스케일(크기) |
| o_time | mouseout | 300 | 실행시간(0.3초) |
| o_easing | mouseout | easeOutBounce | 애니메이션 형태 |
예제
scale
scale
scale
mouseover 효과
: : :
mouseout 효과
: : :
scale 효과초기값 복원
o_scale 은 마우스 아웃일때의 스케일(크기)입니다. 그래서 페이지 로딩되면 자동으로 o_scale 값으로 설정됩니다.
<a class="button orange" ani_type="scale">scale</a>
<a class="button orange" ani_type="scale(o_scale:80)">scale(o_scale:60)</a>
<a class="button orange" ani_type="scale(o_scale:60)">scale(o_scale:60)</a>
6. rotate(회전)
회전 효과
<div ani_type="rotate(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_time | mouseover | 300 | 실행시간(0.3초) |
| a_easing | mouseover | linear | 애니메이션 형태 |
| o_time | mouseout | 200 | 실행시간(0.2초) |
| o_easing | mouseout | linear | 애니메이션 형태 |
예제
7. vflip(수직 뒤집기)
수직 뒤집기 효과
<div ani_type="vflip(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_time | mouseover | 300 | 실행시간(0.3초) |
| o_time | mouseout | 200 | 실행시간(0.2초) |
예제
8. hflip(수평 뒤집기)
수평 뒤집기 효과
<div ani_type="hflip(...)"></div>
변수
| 변수명 | 이벤트(실행) | 기본값 | 설명 |
| a_time | mouseover | 300 | 실행시간(0.3초) |
| o_time | mouseout | 200 | 실행시간(0.2초) |
예제
관련 글&정보
등록일:
마지막 수정일:
자바스크립트(JS)
총글수: 18
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 18 | 없음 | int_utils.js | 추천:0 | 조회:4483 | |
| 17 | 없음 | 손쉬운 애니메이션 효과(ani_type) | 추천:0 | 조회:1112965 | |
| 16 | 없음 | 현재글:손쉬운 애니메이션 효과(ani_type) 응용하기 | 추천:0 | 조회:16527 | |
| 15 | 없음 | 색상전환 효과(ani_type="color") | 추천:0 | 조회:16023 | |
| 14 | 없음 | alt/title 속성 제어(툴팁) | 추천:0 | 조회:5426 | |
| 13 | 없음 | MOVIE 애니메이션(flash 대용) | 추천:0 | 조회:11712 | |
| 12 | 없음 | M9SLIDE(슬라이드) 애니메이션 | 추천:0 | 조회:10388 | |
| 11 | 없음 | M9SLIDE 애니메이션:fade 효과 | 추천:0 | 조회:11473 | |
| 10 | 없음 | M9SLIDE 애니메이션:slide 효과 | 추천:0 | 조회:25467 | |
| 9 | 없음 | M9SLIDE 애니메이션:slice 효과 | 추천:0 | 조회:6991 |
