David.Cheon
UIpac
David.Cheon
  • UIpac (461)
    • 기획·PM (26)
    • UI·UX (30)
    • 콘텐츠·서비스 (15)
    • 마케팅·분석 (15)
    • 경제·경영 (8)
    • 업무자료 (6)
    • 읽을거리 (142)
    • 정보공유 (143)
      • 교육 (24)
      • 인공지능 (19)
      • 모빌리티 (4)
      • ICT동향 (73)
      • 가트너 (12)
      • M-Report (10)
    • 개인공간 (74)
      • 비공개 스크랩 (0)
      • 자기계발 (25)
      • 음악·도서 (9)
      • 영화·공연 (7)
      • 여행·맛집 (3)
      • 프로젝트 (0)
      • 기타 (30)

인기 글

  • CSS 네이밍 규칙
    2017.08.14
  • [템플릿] 비즈니스 모델 캔버스, 린 캔버스
    2014.11.20
    [템플릿] 비즈니스 모델 캔버스, 린 캔버스
  • 에듀테크의 시장 현황
    2021.05.01
    에듀테크의 시장 현황
  • 파워포인트 단축키 모음
    2018.08.10
    파워포인트 단축키 모음
  • 영어 공부에 도움이 되는 54개 사이트
    2014.06.20
    영어 공부에 도움이 되는 54개 사이트

Tags

  • 인공지능
  • Mreport
  • 디자인
  • 사물인터넷
  • 반응형웹
  • 웨어러블
  • 애플리케이션
  • 다음카카오
  • 2015
  • 트렌드
  • 디자인참고
  • UX
  • 벤치마킹
  • daumkakao
  • 트랜드
  • 기획참고
  • 세계 게임시장 규모
  • 동향
  • 가트너
  • Gartner
  • 2014
  • trend
  • 유니티
  • UI
  • 큐레이션
  • 모바일
  • Curation
  • 사이트
  • 기획
  • 분석

최근 댓글

  • 감사합니다.
    아이폰
  • 너무 오래된 자료라 부족한게 많은데 도움이 되셨다니 감사합⋯
    David.Cheon
  • 자료 감사히 잘 쓰겠습니다!! 복 받으실꺼예요~!
    Heather
  • 최근에 만들어진 사이트인데 Episoden이라는 무료 영어⋯
    영어사랑 릴리
  • 감사합니다 ㅎ
    와우

방명록

전체 방문자
327,463
오늘
11
어제
116
Uipac
David.Cheon

UIpac

UI·UX

인터렉션/트랜지션 디자인 참고 사이트 모음

2014. 7. 29. 16:03


UI 애니메이션


capptivate.co

http://capptivate.co/


useyourinterface

http://useyourinterface.com/


sixux

http://sixux.com


dribbble

https://dribbble.com/shots?list=animated


giphy

http://giphy.com/




트랜지션(Transition) 패턴 예제


tympanus

http://tympanus.net/Development/PageTransitions/

http://tympanus.net/Tutorials/CaptionHoverEffects/index.html 


Effeckt

http://h5bp.github.io/Effeckt.css/


animate

http://daneden.github.io/animate.css/


tapotype

http://tapotype.com/


tumblr

http://ui-animations.tumblr.com/


dribbble

http://dribbble.com/search?q=transition


ui-transitions

http://www.ui-transitions.com/#home


give-n-go

http://give-n-go.co/


lazylinepainter

http://lazylinepainter.info/


cssdeck

http://cssdeck.com/




css3 속성 쉽게 사용하기


transform

http://westciv.com/tools/transforms/index.html


gradient

http://westciv.com/tools/gradients/


shadow

http://westciv.com/tools/shadows/


text stroke

http://westciv.com/tools/textStroke/index.html


css3 와 js 를 이용한 움직이는 배경

http://matthew.wagerfield.com/parallax/



자바스크립트


codepen

http://codepen.io/


cssdeck

http://cssdeck.com/


CSS3 이미지 슬라이더

http://cssdeck.com/labs/css3-image-slider


자바스크립트를 이용한 터치 컨트롤 슬라이더

http://touchslider.com/


옵션별 터치슬라이더모음

http://dohoons.com/test/flick/


애니메이션 속도 비교

http://easings.net/#


베지에 곡선 테스트

http://cubic-bezier.com/




  • 카카오스토리
  • 트위터
  • 페이스북

'UI·UX' 카테고리의 다른 글

웹사이트 모듈 디자인 가이드  (0) 2014.11.05
애니메이션과 트랜지션의 차이  (0) 2014.09.22
웨어러블 디바이스를 위한 VUI  (0) 2014.07.21
UI/UX 기획에 도움이 되는 사이트  (0) 2014.07.09
Infographic — The Psychology of Color: A Color Guide For Designers  (0) 2014.07.03
    애니메이션, 인터랙션, 트랜지션
    댓글쓰기
    다음 글
    애니메이션과 트랜지션의 차이
    웨어러블 디바이스를 위한 VUI
    이전 글
    웨어러블 디바이스를 위한 VUI

    티스토리툴바