어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 자바스크립트(JS)

본문 영역

손쉬운 애니메이션 효과(ani_type) 응용하기 상세보기

작성자: 관리자 추천: 0  조회: 16182

손쉬운 애니메이션 효과(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 속성 변경 //-->

  • 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"인 객체에 속성을 변경한 페이드 효과 적용

1. flash(반짝)


반짝이는 효과

<div ani_type="flash(...)"></div>

변수


ani_type의 flash 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 30 투명도(0 ~ 100)
mouseover 200 실행시간(0.2초)
※ flash 효과에서는 mouseout 설정이 없습니다.

예제


flash
flash
flash

mouseover 효과

: :

flash 효과초기값 복원


2. fade


페이드(서서히 나타남/사라짐) 효과

<div ani_type="fade(...)"></div>

변수


ani_type의 fade 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 50 투명도(0 ~ 100)
mouseover 300 실행시간(0.3초)
mouseover linear 애니메이션 형태
mouseout 100 투명도(0 ~ 100)
mouseout 200 실행시간(0.2초)
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>

변수


ani_type의 bounce 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover up 방향(up,down,left,right)
mouseover undefined 거리(높이의 1/3)
mouseover 3 바운드 수
mouseover 800 실행시간(0.8초)
mouseout up 방향(up,down,left,right)
mouseout undefined 거리(높이의 1/3)
mouseout 2 바운드 수
mouseout 400 실행시간(0.4초)

예제


bounce
bounce
bounce

mouseover 효과

: : : :


mouseout 효과

: : : :

bounce 효과초기값 복원


4. shake(흔들기)


좌우로 흔드는 효과

<div ani_type="shake(...)"></div>

변수


ani_type의 shake 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover both 방향(both,up,down,left,right)
mouseover undefined 거리(넓이이의 1/20)
mouseover 3 흔들기 수
mouseover 800 실행시간(0.8초)
mouseout both 방향(both,up,down,left,right)
mouseout undefined 거리(넓이의 1/30)
mouseout 2 흔들기 수
mouseout 400 실행시간(0.4초)

예제


shake
shake
shake

mouseover 효과

: : : :


mouseout 효과

: : : :

shake 효과초기값 복원


5. scale(크기)


크기 변환(튀어나오는) 효과

<div ani_type="scale(...)"></div>

변수


ani_type의 scale 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 120 스케일(크기)
mouseover 500 실행시간(0.5초)
mouseover easeOutBounce 애니메이션 형태
mouseout 100 스케일(크기)
mouseout 300 실행시간(0.3초)
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>

변수


ani_type의 rotate 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 300 실행시간(0.3초)
mouseover linear 애니메이션 형태
mouseout 200 실행시간(0.2초)
mouseout linear 애니메이션 형태

예제


rotate
rotate
rotate

mouseover 효과

: :


mouseout 효과

: :

rotate 효과초기값 복원


7. vflip(수직 뒤집기)


수직 뒤집기 효과

<div ani_type="vflip(...)"></div>

변수


ani_type의 vflip 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 300 실행시간(0.3초)
mouseout 200 실행시간(0.2초)

예제


vflip
vflip
vflip

mouseover 효과

:


mouseout 효과

:

vflip 효과초기값 복원


8. hflip(수평 뒤집기)


수평 뒤집기 효과

<div ani_type="hflip(...)"></div>

변수


ani_type의 hflip 변수 표
변수명 이벤트(실행) 기본값 설명
mouseover 300 실행시간(0.3초)
mouseout 200 실행시간(0.2초)

예제


hflip
hflip
hflip

mouseover 효과

:


mouseout 효과

:

hflip 효과초기값 복원


관련 글&정보



TOP

등록일:
마지막 수정일:
목록

자바스크립트(JS)

총글수: 18
자바스크립트(JS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
18 없음 int_utils.js 추천:0 조회:4228
17 없음 손쉬운 애니메이션 효과(ani_type) 추천:0 조회:1111904
16 없음 현재글:손쉬운 애니메이션 효과(ani_type) 응용하기 추천:0 조회:16182
15 없음 색상전환 효과(ani_type="color") 추천:0 조회:15424
14 없음 alt/title 속성 제어(툴팁) 추천:0 조회:5080
13 없음 MOVIE 애니메이션(flash 대용) 추천:0 조회:11392
12 없음 M9SLIDE(슬라이드) 애니메이션 추천:0 조회:9845
11 없음 M9SLIDE 애니메이션:fade 효과 추천:0 조회:11116
10 없음 M9SLIDE 애니메이션:slide 효과 추천:0 조회:25120
9 없음 M9SLIDE 애니메이션:slice 효과 추천:0 조회:6663
초기화 
자바스크립트(JS) 검색