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

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

M9SLIDE 애니메이션:box 효과 상세보기

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

M9SLIDE 애니메이션:box 효과


M9SLIDE 애니메이션 효과 중 하나로, 이미지 혹은 오브젝트를 가로,세로로 조각내어 애니메이션 효과를 준 것입니다.

슬라이드 테스트를 위한 이미지1 슬라이드 테스트를 위한 이미지2 슬라이드 테스트를 위한 이미지3

<div ani_type="slide"> <!--// ①슬라이드 선언 //-->

     <img src="./img/slide/nemo.jpg" slide_type="box"> <!--// ②슬라이드 첫번째 항목 //-->
     <img src="./img/slide/toystory.jpg" slide_type="box" style="display:none;"> <!--// ②display:none 처리 //-->
     <img src="./img/slide/up.jpg" slide_type="box" style="display:none;"> <!--// ②display:none 처리 //-->

</div>

속성


box 속성값
변수명 기본값 설명
x_direction undefined X축 방향(left,right,random,undefined)
y_direction random Y축 방향(up,down,random,undefined)
speed 1000 실행속도(1초:1000)
easing swing 애니메이션 형태
box_x_num 10 box X축 갯수
box_y_num 3 box Y축 갯수
fade 0 페이드 효과 유무
rotate 0 회전 효과 유무
scale 0 사이즈 효과 유무
random 0 랜덤 효과 유무

속성적용


설정값의 우선순위는 ②각항목의 설정값 》 ①선언부의 설정값 》 기본값 순이다.

공통 적용하기

<div ani_type="slide(fade:1,x_direction:right)"> ← ①속성 공통 적용

     <... slide_type="box" ...>
     <... slide_type="box" ...>
     <... slide_type="box" ...>

</div>

공통으로 속성을 부여하여 쉽게 사용하실 수 있습니다.

각 요소에 적용하기

<div ani_type="slide">

     <... slide_type="box(fade:1,x_direction:left)" ...> ← ②속성 각각 적용
     <... slide_type="box(fade:1,x_direction:right)" ...> ← ②속성 각각 적용
     <... slide_type="box(random:1,x_direction:left)" ...> ← ②속성 각각 적용

</div>

슬라이딩 될 요소들 각각에 자신만의 속성을 부여하실 수 있습니다.

말로 풀어본 실행


이미지 혹은 오브젝트를 가로(box_x_num) X 세로(box_x_num) 갯수로 나누어
X축(x_direction)방향, Y축(y_direction)방향으로
(speed)의 속도로, 애니메이션(easing) 효과를 주어 나타낸다.

이 때, 애니메이션을 더 좋게 꾸미기 위해 페이드(fade),회전(rotate),사이즈(scale),랜덤(random) 효과를 추가해 줄 수 있다.

X축(x_direction)방향 값으로 random을 주면, left,right,random,undefined 중 하나를 선택해서 실행한다.
Y축(y_direction)방향 값으로 random을 주면, up,down,random,undefined 중 하나를 선택해서 실행한다.
방향 값의, undefined는 "없다"는 뜻이다.

예제


슬라이드 변경 테스트를 위한 이미지1

[M9SLIDE 애니메이션 box효과 적용해보기] 예제소스보기


※ 이 예제는 대기시간(delay)은 2초입니다.
※ 애니메이션(easing) 효과를 자세히 보시려면, speed값을 2초(2000) 이상 설정해야 확인해 보실 수 있습니다.

이미지 혹은 오브젝트를 가로(box_x_num) X 세로(box_x_num) 갯수로 나누어
X축(:)방향, Y축(:)방향으로
(:)의 속도로, 애니메이션(:) 효과를 주어 나타낸다.

이 때, 애니메이션을 더 좋게 꾸미기 위해 페이드(:),회전(:),사이즈(:),랜덤(:) 효과를 추가해 줄 수 있다.

초기값 복원
사용자지정1 적용 사용자지정2 적용 사용자지정3 적용 사용자지정4 적용 사용자지정5 적용





관련 글&정보


  • 1 fade, rotate, scale이 모두 (0)일 경우
     아무 효과 없어 보이므로 이때는 자동으로 scale효과가 적용됩니다.
  • 2 x_direction이 undefined 일 경우
     콘트롤 박스의 방향을 따릅니다.(prev →right, next →left)
  • 3 너무 많은 수(box_x_num) X (box_y_num)로 나누지 마세요.
     나누어져 보이지만, 원리는 나누는 수 많큼 그 이미지(혹은 오브젝트)를 복사해야합니다. box_x_num가 10 X box_y_num가 3 일 경우, 30개의 이미지를 로딩해야합니다. 30개 이하로 설정해주세요.
  • 4 회전rotate효과만 사용하지 마세요.
     회전효과는 fade, scale와 같이 사용하세요.


TOP

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

자바스크립트(JS)

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