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

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

본문 영역

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

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

손쉬운 애니메이션 효과(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="효과">
크기(width,height)가 있는 독립적인 태그에 적용 가능.(거의 모든 태그)

원리


페이지가 로딩되면, 페이지 내 모든 요소에 대해 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]효과로 대처됩니다

관련 글&정보


TOP

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

자바스크립트(JS)

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