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

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

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

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

M9SLIDE 애니메이션:slide 효과


M9SLIDE 애니메이션 효과 중 하나로, 이미지 혹은 오브젝트를 방향으로 애니메이션 효과를 준 것입니다.

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

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

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

</div>

속성


slide 속성값
변수명 기본값 설명
x_direction undefined X축 방향(left,right,random,undefined)
y_direction random Y축 방향(up,down,random,undefined)
speed 1000 실행속도(1초:1000)
easing swing 애니메이션 형태
fade 0 페이드 효과 유무

속성적용


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

공통 적용하기

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

     <... slide_type="slide" ...>
     <... slide_type="slide" ...>
     <... slide_type="slide" ...>

</div>

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

각 요소에 적용하기

<div ani_type="slide">

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

</div>

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

말로 풀어본 실행


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

이 때, 애니메이션을 더 좋게 꾸미기 위해 페이드(fade) 효과를 추가해 줄 수 있다.

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

예제


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

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


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

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

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

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





관련 글&정보


  • 1 x_direction이 undefined 일 경우
     콘트롤 박스의 방향을 따릅니다.(prev →right, next →left)


TOP

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

자바스크립트(JS)

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