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

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

본문 영역

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

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

M9SLIDE 애니메이션:fade 효과


M9SLIDE 애니메이션 효과 중 하나로, 이미지 혹은 오브젝트를 서서히 나타내는 애니메이션 효과를 준 것입니다.

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

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

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

</div>

속성


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

속성적용


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

공통 적용하기

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

     <... slide_type="fade" ...>
     <... slide_type="fade" ...>
     <... slide_type="fade" ...>

</div>

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

각 요소에 적용하기

<div ani_type="slide">

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

</div>

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

말로 풀어본 실행


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

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

예제


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

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


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

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

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





관련 글&정보



TOP

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

자바스크립트(JS)

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