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

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

본문 영역

M9SLIDE(슬라이드) 애니메이션 상세보기

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

M9SLIDE(슬라이드) 애니메이션


ani_type="slide"


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

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

<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>

기본구조


<div ani_type="slide">
     <div slide_type="slide 애니메이션 효과"></div>
</div>

slide 효과 종류



사용규칙


  • 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>

위 코드에서 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>

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

그럼 ①선언부에서 설정할 수 있는 값들은 어떤것들이 있을까?

선언부에서 선언될 수 있는 값들은 slide 효과 종류의 합이 된다.

①선언부 속성 = fade 속성 + slide 속성 + slice 속성 + box 속성 + (auto,delay)


slide 애니메이션 속성값
변수명 기본값 설명 적용효과
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="" ...>


관련 글&정보

TOP

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

자바스크립트(JS)

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