[인터랙션]_Z축 트랜지션

지난 번 공유드린 런던에 있는 'Sebas & Clim' 스튜디오의 애니메이션 작업은 재밌게 보셨나요? 오늘은 트랜지션에 대해 공유할까 합니다. 오늘 공유할 트랜지션은 z축을 표현하는, 즉 3d 효과 트랜지션입니다.


Cube transition 큐브 트랜지션
1. Covert
Covert는 CreativeDash사에서 Covert사를 고객사로 제작한 일종의 메일 어플리케이션입니다. 아래의 영상은 새로운 메세지가 있을 시 업데이트 되는 트랜지션입니다.

from : CREATIVEDASH


2. What's on sale
'What's on sale'은 위치 기반 쿠폰 어플리케이션입니다. 위에서 공유한 Covert와 동일한 회사에서 만든 어플리케이션인데요. GPS를 통해 사용자와 가장 가까운 곳에 위치한 각종 편의시설 쿠폰 정보를 제공해주는 어플리케이션입니다. 데이터가 업데이트 되는 트랜지션입니다.

from : CREATIVEDASH
출처 : http://creativeda.sh/#home



기타 다른 3d 효과 트랜지션
3. Fold Effect_animation
3D 레이어 효과

from : Jelio Dimitro - Arsek.eu

출처 : http://dribbble.com/shots/1041852-Fold-Effect-animation?list=users


4. TurboDoktor_transition
3D 레이어 효과

from : Karol Ortyl

출처 : http://www.behance.net/gallery/TurboDoktor-iPhone-App/8586887


5. City Guides by National Geographic
3D 레이어 효과

from : Rally Interactive (via Ben Cline)

출처 : http://dribbble.com/shots/1040703-Stats-Animated-GIF


6. iPhone Menu Concept_animationg
3D 레이어 효과

from : Stephane Bouget

출처 : http://dribbble.com/shots/394407-Iphone-Menu-Concept-animated-gif?list=searches&tag=gif


7. Paper
3D 레이어 효과 및 스케일 조절

from : FityThree Inc.

출처 : http://www.fiftythree.com/paper


8. iPhone Navbar_animation
스케일 조절 및 줌 인/아웃

from : Jeff Broderick

출처 : http://dribbble.com/shots/1028754-iPhone-Retina-Navbar-Animation?list=users


9. flipboard
3D 레이어 효과 및 스케일 조절

from : Min Joon Kim

출처 : http://vimeo.com/33536652



Parallax scrolling 패럴랙스 스크롤링
레이어에 시차를 두어 3d 효과를 내는 트랜지션

[Web Design Trend] Parallax Scrolling

(클릭하면 해당 페이지로 이동합니다.)


10. Tandem Scroll

from : Terry Martin

출처 : http://vimeo.com/45382919


11. Effect on zodiacr app' by beasty design and syst-ms

from : beasty design

출처 : http://vimeo.com/49374447

다음에는 재미있는 로딩 동영상을 공유하도록 하겠습니다.
[참고##영감 동영상##]