본문 영역
M9SLIDE(슬라이드) 애니메이션 상세보기
작성자: 관리자
추천: 0 조회: 9892
M9SLIDE(슬라이드) 애니메이션
ani_type="slide"
SLIDE 애니메이션은 ani_type의 기본 확장형(기본탑재)의 하나이므로, 자바스크립트 호출 필요없이 그냥 선언만 하면 자동으로 자바스크립트가 로딩됩니다.
사용자는 ani_type="slide" 속성만으로 SLIDE 애니메이션 효과를 주실 수 있습니다.
<div ani_type="slide"> <!--// ①슬라이드 선언 //-->
<img src="./img/slide/nemo.jpg" slide_type="slide"> <!--// ②슬라이드 첫번째 항목 //-->
<img src="./img/slide/toystory.jpg" slide_type="box" style="display:none;"> <!--// ②display:none 처리 //-->
<img src="./img/slide/up.jpg" slide_type="slice" style="display:none;"> <!--// ②display:none 처리 //-->
</div>
<img src="./img/slide/nemo.jpg" slide_type="slide"> <!--// ②슬라이드 첫번째 항목 //-->
<img src="./img/slide/toystory.jpg" slide_type="box" style="display:none;"> <!--// ②display:none 처리 //-->
<img src="./img/slide/up.jpg" slide_type="slice" style="display:none;"> <!--// ②display:none 처리 //-->
</div>
기본구조
<div ani_type="slide">
<div slide_type="slide 애니메이션 효과"></div>
</div>
<div slide_type="slide 애니메이션 효과"></div>
</div>
slide 효과 종류
-
1
fade
서서히 나타나는 효과
M9SLIDE 애니메이션:fade 효과
-
2
slide
좌/우/상단/하단/대각선 들어오는 효과
M9SLIDE 애니메이션:slide 효과
-
3
slice
가로로 분할해서 들어오는 효과
M9SLIDE 애니메이션:slice 효과
-
4
box
가로/세로로 분할해서 들어오는 효과
M9SLIDE 애니메이션:box 효과
사용규칙
-
1
슬라이드 시킬 항목의 크기는 같아야한다. (넓이,높이)
-
2
슬라이드 시킬 첫번째 항목의 display값은 보이는 값("" 혹은 block)이여야 한다.
-
3
슬라이드 시킬 나머지 항목의 display값은 none이여야한다.
속성 상속
<div ani_type="slide(speed:4000)"> ← ①선언부의 설정값
<div slide_type="slide(speed:3000)"></div> ← ②각항목의 설정값
<div slide_type="box"></div>
<div slide_type="slice(speed:2000)"></div> ← ②각항목의 설정값
</div>
<div slide_type="slide(speed:3000)"></div> ← ②각항목의 설정값
<div slide_type="box"></div>
<div slide_type="slice(speed:2000)"></div> ← ②각항목의 설정값
</div>
위 코드에서 speed는 슬라이딩되는 속도의 값이다.
각각의 항목에 자신만의 speed를 설정할 수 있다.
두번째 항목(box)에 주시하자. 두번째 항목의 speed는 설정되지 않았기 때문에 기본값이 사용되어야 하지만, ①선언부(ani_type="slide")의 speed의 값을 상속받게 되어 speed:4000값을 할당받게 됩니다.
이 상속은 다른 모든 값(easing, x_direction, y_direction ..)들에 대해서도 모두 적용된다.
이 상속개념은 특히, 하나의 슬라이드 효과만 사용 할 경우 유용하게 사용된다.
<div ani_type="slide(speed:4000,easing:easeOutBounce)"> ← ①선언부의 설정값
<div slide_type="slide"></div>
<div slide_type="slide"></div>
<div slide_type="slice"></div>
</div>
<div slide_type="slide"></div>
<div slide_type="slide"></div>
<div slide_type="slice"></div>
</div>
설정값의 우선순위는 ②각항목의 설정값 》 ①선언부의 설정값 》 기본값 순이다.
그럼 ①선언부에서 설정할 수 있는 값들은 어떤것들이 있을까?
선언부에서 선언될 수 있는 값들은 slide 효과 종류의 합이 된다.
①선언부 속성 = fade 속성 + slide 속성 + slice 속성 + box 속성 + (auto,delay)
| 변수명 | 기본값 | 설명 | 적용효과 |
|---|---|---|---|
| auto | 1 | 자동실행여부(1:자동실행,0:자동실행 안함) | |
| delay | 10000(10초) | 대기시간(1초:1000) | |
| x_direction | undefined | X축 방향(left,right,undefined) | 전체 |
| y_direction | undefined | Y축 방향(up,down,undefined) | 전체 |
| speed | undefined | 실행속도(1초:1000) | 전체 |
| easing | swing | 애니메이션 형태 | 전체 |
| slice_num | undefined | slice 갯수 | slice |
| box_x_num | undefined | box X 갯수 | box |
| box_y_num | undefined | box Y 갯수 | box |
| fade | 0 | 페이드 효과 유무 | slide,slice,box |
| scale | 0 | 사이즈 효과 유무 | box |
| rotate | 0 | 회전 효과 유무 | box |
| random | 0 | 랜덤 효과 유무 | slice,box |
슬라이드 콘트롤 설정하기
controll_type="" 속성을 사용해서 슬라이드의 콘트롤 버튼들을 자신이 원하는 이미지로 대체 가능합니다.
자세한 사용법은 M9CONTROLLBOX 설정
을 참조해 주세요.①선언부에 콘트롤 선언(controll_type="")을 한다.
<... ani_type="slide" controll_type="" ...>
관련 글&정보
등록일:
마지막 수정일:
자바스크립트(JS)
총글수: 18
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 18 | 없음 | int_utils.js | 추천:0 | 조회:4249 | |
| 17 | 없음 | 손쉬운 애니메이션 효과(ani_type) | 추천:0 | 조회:1112013 | |
| 16 | 없음 | 손쉬운 애니메이션 효과(ani_type) 응용하기 | 추천:0 | 조회:16225 | |
| 15 | 없음 | 색상전환 효과(ani_type="color") | 추천:0 | 조회:15481 | |
| 14 | 없음 | alt/title 속성 제어(툴팁) | 추천:0 | 조회:5110 | |
| 13 | 없음 | MOVIE 애니메이션(flash 대용) | 추천:0 | 조회:11418 | |
| 12 | 없음 | 현재글:M9SLIDE(슬라이드) 애니메이션 | 추천:0 | 조회:9892 | |
| 11 | 없음 | M9SLIDE 애니메이션:fade 효과 | 추천:0 | 조회:11152 | |
| 10 | 없음 | M9SLIDE 애니메이션:slide 효과 | 추천:0 | 조회:25148 | |
| 9 | 없음 | M9SLIDE 애니메이션:slice 효과 | 추천:0 | 조회:6693 |
