본문 영역
M9SLIDE 애니메이션:fade 효과 상세보기
작성자: 관리자
추천: 0 조회: 11470
M9SLIDE 애니메이션:fade 효과
M9SLIDE 애니메이션 효과 중 하나로, 이미지 혹은 오브젝트를 서서히 나타내는 애니메이션 효과를 준 것입니다.
<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>
<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>
속성
| 변수명 | 기본값 | 설명 |
|---|---|---|
| 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>
<... 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>
<... 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는 "없다"는 뜻이다.
예제
[M9SLIDE 애니메이션 fade효과 적용해보기] 예제소스보기
※ 이 예제는 대기시간(delay)은 2초입니다.
※ 애니메이션(easing) 효과를 자세히 보시려면, speed값을 2초(2000) 이상 설정해야 확인해 보실 수 있습니다.
이미지 혹은 오브젝트를 서서히 나타내거나 혹은 약간의 X축(:)방향, Y축(:)방향으로
(:)의 속도로, 애니메이션(:) 효과를 주어 나타낸다.
초기값 복원
사용자지정1 적용 사용자지정2 적용 사용자지정3 적용 사용자지정4 적용
관련 글&정보
등록일:
마지막 수정일:
자바스크립트(JS)
총글수: 18
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 18 | 없음 | int_utils.js | 추천:0 | 조회:4482 | |
| 17 | 없음 | 손쉬운 애니메이션 효과(ani_type) | 추천:0 | 조회:1112959 | |
| 16 | 없음 | 손쉬운 애니메이션 효과(ani_type) 응용하기 | 추천:0 | 조회:16526 | |
| 15 | 없음 | 색상전환 효과(ani_type="color") | 추천:0 | 조회:16017 | |
| 14 | 없음 | alt/title 속성 제어(툴팁) | 추천:0 | 조회:5424 | |
| 13 | 없음 | MOVIE 애니메이션(flash 대용) | 추천:0 | 조회:11711 | |
| 12 | 없음 | M9SLIDE(슬라이드) 애니메이션 | 추천:0 | 조회:10384 | |
| 11 | 없음 | 현재글:M9SLIDE 애니메이션:fade 효과 | 추천:0 | 조회:11470 | |
| 10 | 없음 | M9SLIDE 애니메이션:slide 효과 | 추천:0 | 조회:25465 | |
| 9 | 없음 | M9SLIDE 애니메이션:slice 효과 | 추천:0 | 조회:6987 |
