개발자를 위한 html css js
페이스북 UX/GUI 그룹에 마침 Transform3D 와 Transition을 활용해서 만들 수 있는 인터렉션 디자인 컨셉 질문이 들어와 답변과 함께 구현하였습니다.
원본 이미지는 dribbble.com 에 SANG NGUYEON 이라는 분의 컨셉 인터렉션 디자인 아트입니다.
원본 컨셉 아트는 동영상인 관계로 URL을 링크 합니다.
https://dribbble.com/shots/6673049--10-Shoe-Boxes-Swipe-Transition
앞서 연재한 transform3D 와 transition 을 활용하여 어떤것을 구현 할 수 있을까에 대한 좋은 예시가 될 것 같아서 소개합니다.
구현된 소스는 github 에 링크 되어 있으면 작성된 샘플 확인은 아래링크에서 가능합니다.
구현 샘플 확인(PC에서 볼때와 모바일로 볼때, 조금 차이가 있습니다
(미디어 쿼리를 이용하여 반응형으로 구현하였습니다.):
https://chading.net/nike-app-sample?velog
github 소스 주소
https://github.com/chadingTV/nike-app-sample/blob/master/README.md
4개의 댓글
chading님이 작성한 다른 포스트
페이스북 UX/GUI 그룹에 마침 Transform3D 와 Transition을 활용해서 만들 수 있는 인터렉션 디자인 컨셉 질문이 들어와 답변과 함께 구현하였습니다. 원본 이미지는 dribbble.com 에 SANG NGUYEON 이라는 분의 컨셉 인터렉션 디자인 아트입니다. 원본 컨셉 아트는 동영상인 관계로 URL을 링크 합니다. https://...
1) Transition 속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+) 속성값이 변화하는 경우에만 동작하므로 html 샘플 확인 : https://natsgun.tistory.com/15 [개발자C군의 개발노트] 2-2) 자바스크립트 이용하지 않고 변화를 주는 방법 2-2-1) 크롬 개발자...
실무에서 필요한 내용 위주의 '개발자를 위한 html/css/js' 시리즈입니다. 사내 강좌로 진행 했던 내용을 편집하여 연재할 예정입니다. CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 가능한 CSS 요소입니다. Transform 3D의 요소로 지정되면 브라우져에서 GPU를 ...
오우 멋져요!
3D css Wishlist에 적어는 놨는데... 자극을 받네요 ㅋㅋ😂
오.. transform은 항상 알듯말듯.. 막상 쓰려면 항상 찾아보면서 써야되는데 멋집니다