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

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

MOVIE 애니메이션(flash 대용) 상세보기

작성자: 관리자 추천: 0  조회: 11419
본문 글크기 설정

MOVIE 애니메이션(flash 대용)


ani_type="movie"


MOVIE 애니메이션은 간단한 flash 효과를 주기 위한 자바스크립트입니다.

MOVIE 애니메이션은 ani_type의 기본 확장형(기본탑재)의 하나이므로, 자바스크립트 호출 필요없이 그냥 선언만 하면 자동으로 자바스크립트가 로딩됩니다.
사용자는 ani_type="movie" 속성만으로 MOVIE 애니메이션 효과를 주실 수 있습니다.

기본구조


<div id="..." ani_type="movie(movie 속성)"> <--// MOVIE 애니메이션 선언 //-->
     <div movie_type="movie 애니메이션 효과"></div> <--// 효과 실행 //-->
</div>

movie 속성


movie 속성값
변수명 기본값 설명
type load 실행타입
     load : 페이지 로딩 후 자동 실행
     event : 사용자 정의 이벤트 지정시 실행
     scroll : 스크롤되었을때 실행
delay 0 실행 전 대기시간
(처음 한번만 사용된다.)
stay undefined 실행 후 멈춤시간
(반복시 사용)
end_delay undefined 실행 후 대기시간
(자연스러운 전환을 위해 사용)

움직임


  • 1 type이 load이면 페이지 로딩 후 자동 실행되고, event이면 사용자 명령(onclick="M9MOVIE.move(실행할 아이디);")을 기다린다.
  • 2 실행 전 대기시간(delay)을 기다린 후, 애니메이션이 구현된다.
  • 3 모든 애니메이션이 구현된 후, 실행 후 멈춤시간(stay)이 없으면 그대로 애니메이션은 끝난다.
  • 4 만약, 실행 후 멈춤시간(stay)이 존재하면 stay 시간만큼 멈춘 후 거꾸로 사라진다.(초기화)("stay"를 반복여부 변수로 볼 수 있다.)
  • 5 실행 후 대기시간(end_delay)이 존재하면 (end_delay)을 대기한다.
  • 6 다시 애니메이션이 구현된다.


<div class="d_movie" ani_type="movie(type:load,stay:1000)"> <div class="d_box1" movie_type="slide(delay:0,x:-500,y:-500,speed:3000);rotate(delay:0,speed:3000)">rotate</div> <div class="d_box1" movie_type="slide(delay:3500,x:-500,y:500,speed:3000);scale(delay:3500,scale:4,speed:3000)">scale</div> <div class="d_box1" movie_type="slide(delay:7000,x:500,y:-500,speed:3000);vflip(delay:7000,speed:3000)">vflip</div> <div class="d_box1" movie_type="slide(delay:10500,x:500,y:500,speed:3000);hflip(delay:10500,speed:3000)">hflip</div> </div>

rotate
scale
vflip
hflip

[MOVIE 애니메이션] 예제소스보기


movie_type 효과들


1. slide(슬라이드)


슬라이드 애니메이션 효과

<div id="m_slide" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_slide');">애니메이션 실행</a>

BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[슬라이드 애니메이션 효과] 예제소스보기


slide 속성값
변수명 기본값 설명
direction down 들어오는 방향(up,down,left,right)
distance undefined 들어오는 이동거리(숫자)
x undefined 들어오는 x좌표
y undefined 들어오는 y좌표
speed 1000(1초) 실행속도
easing linear 애니메이션 형태
delay 0 실행전 대기시간

x,y 좌표값(시작점)을 설정하면, direction(방향), distance(이동거리)는 무시된다. (좌표값 우선)
distance(이동거리)를 선언하지 않을 경우, direction(방향)에 따라 자동 거리가 설정됩니다. (up, down일때 movie의 높이/left,right일때 movie의 넓이)

2. rotate(회전)


회전 애니메이션 효과

이 예제는 slide + rotate 가 결합된 애니메이션입니다. <div id="m_rotate" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left);rotate(delay:0,rotate:1)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up);rotate(delay:500,rotate:1)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down);rotate(delay:1000,rotate:1)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right);rotate(delay:1500,rotate:1)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_rotate');">애니메이션 실행</a>

이 예제는 slide + rotate 가 결합된 애니메이션입니다.
BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[회전 애니메이션 효과] 예제소스보기


rotate 속성값
변수명 기본값 설명
rotate 1 회전수(360)
speed 1000(1초) 실행속도
easing linear 애니메이션 형태
delay 0 실행전 대기시간

3. scale(비율)


비율 애니메이션 효과

이 예제는 slide + scale 가 결합된 애니메이션입니다. <div id="m_scale" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left);scale(delay:0,scale:2)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up);scale(delay:500,scale:2)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down);scale(delay:1000,scale:2)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right);scale(delay:1500,scale:2)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_scale');">애니메이션 실행</a>

이 예제는 slide + scale 가 결합된 애니메이션입니다.
BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[비율 애니메이션 효과] 예제소스보기


scale 속성값
변수명 기본값 설명
scale 2 시작 비율(1:100)
speed 1000(1초) 실행속도
easing linear 애니메이션 형태
delay 0 실행전 대기시간

4. fade(페이드)


페이드 애니메이션 효과

이 예제는 slide + fade 가 결합된 애니메이션입니다. <div id="m_fade" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left);fade(delay:0,opacity:0)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up);fade(delay:500,opacity:0)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down);fade(delay:1000,opacity:0)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right);fade(delay:1500,opacity:0)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_fade');">애니메이션 실행</a>

이 예제는 slide + fade 가 결합된 애니메이션입니다.
BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[페이드 애니메이션 효과] 예제소스보기


fade 속성값
변수명 기본값 설명
opacity 1 시작 투명도(1:100)
speed 1000(1초) 실행속도
easing linear 애니메이션 형태
delay 0 실행전 대기시간

5. vflip(수직뒤집기)


수직뒤집기 애니메이션 효과

이 예제는 slide + vflip 가 결합된 애니메이션입니다. <div id="m_vflip" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left);vflip(delay:0)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up);vflip(delay:500)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down);vflip(delay:1000)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right);vflip(delay:1500)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_vflip');">애니메이션 실행</a>

이 예제는 slide + vflip 가 결합된 애니메이션입니다.
BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[수직뒤집기 애니메이션 효과] 예제소스보기


vflip 속성값
변수명 기본값 설명
speed 1000(1초) 실행속도
delay 0 실행전 대기시간

6. hflip(수평뒤집기)


수평뒤집기 애니메이션 효과

이 예제는 slide + hflip 가 결합된 애니메이션입니다. <div id="m_hflip" class="d_movie" ani_type="movie(type:event)"> <div class="d_box1" movie_type="slide(delay:0,direction:left);hflip(delay:0)">BOX1</div> <div class="d_box1" movie_type="slide(delay:500,direction:up);hflip(delay:500)">BOX2</div> <div class="d_box1" movie_type="slide(delay:1000,direction:down);hflip(delay:1000)">BOX3</div> <div class="d_box1" movie_type="slide(delay:1500,direction:right);hflip(delay:1500)">BOX4</div> </div> <a class="button small blue" onclick="M9MOVIE.move('m_hflip');">애니메이션 실행</a>

이 예제는 slide + hflip 가 결합된 애니메이션입니다.
BOX1
BOX2
BOX3
BOX4
애니메이션 실행

[수평뒤집기 애니메이션 효과] 예제소스보기


hflip 속성값
변수명 기본값 설명
speed 1000(1초) 실행속도
delay 0 실행전 대기시간

관련 글&정보


TOP

본문 공유 설정
등록일:
마지막 수정일:
목록

자바스크립트(JS)

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