[jQTouch] 페이지 전환 효과 (에니메이션 효과)

jQTouch 에서는 페이지를 전환시킬 때 다양한 시각적 효과를 지원한다. 그것도 매우 간단히!
링크 태그인 a 태그에 class 속성의 설정으로 뷰 전환 효과를 지정할 수 있는데 슬라이드 효과에서 부터 페이드효과 그리고 큐브 형태의 에니메이션 효과까지 다양하게 지원된다

마치 파워포인트의 각 슬라이드가 넘어갈 때 줄 수 있는 효과와 유사하다
매우 간단한 사용법이라 블로깅 하기가 민망한 수준이다. 단지 class 속성 정의 뿐이니...

뷰 전환의 기본값은 'slide' 이다.
slide는 왼쪽으로 미끄러지듯 페이지가 전환되는 효과이다.

그리고 누구나 흥미를 가질만한 효과는 flip, swap, cube 정도라 생각된다
이 세 효과는 시각적으로 매우 동적인 전환 효과를 보여준다

아래 화면은 차례대로 flip, swap, cube 효과로 뷰를 전환시키는 모습이다
flip 는 화면을 뒤집는듯한 효과, swap 은 두 화면이 시각적으로 교체되는 효과, cube는 입방체모양희 전환효과를 보여주고 있다. 이런 화려한 효과가 단지 몇자만으로 가능하다니, 다시한번 jQTouch에게 고마울 따름이다

 

 

기타 다른 전환 효과도 앞선 예 보다는 정적이지만 보편적인 전환 효과로써 가치가 있을 것이다
slide : 기본값. 오른쪽에서 왼쪽으로 미끄러지 듯 전환
slideup: slide와 유사. 단 방향은 아래에서 윗쪽으로 미끄러지 듯 전환
dissolve: 점차 밝아지는 효과
fade: 점차 뚜렷해지는 효과. dissolve와 시각적으로 유사
pop: 팝업처럼 쏟아 오르는 효과

간단하기 때문에 일부 코드 조각만 제시한다

<ul class="rounded">
    <li><a href="#animdemo">slid(default)</a></li>
    <li><a href="#animdemo" class="slideup">slideup</a></li>
    <li><a href="#animdemo" class="dissolve">dissolve</a></li>
    <li><a href="#animdemo" class="fade">fade</a></li>
    <li><a href="#animdemo" class="flip">flip</a></li>
    <li><a href="#animdemo" class="pop">pop</a></li>
    <li><a href="#animdemo" class="swap">swap</a></li>
    <li><a href="#animdemo" class="cube">cube</a></li>   
  </ul>