[Ref] 인터렉션 레퍼런스 사이트 _ 애플

[ 인터렉션 레퍼런스 사이트 ]

 

APPLE 

 

항상 획기전이고 독보적인 사이트 디자인을 유지하는 애플.

익터렉션 스크롤, 패럴랙스 스크롤(다중 인터렉션) 기능이 적용되어서

마우스 타이밍 따라 비디오 상영하듯이 보여진다.

 

기존 인터렉션 사이트와 차이,

마우스 스크롤을 일정단위로 나누어서 영상이 돌게끔했다면,

지금은 마우스 스크롤이 움직일때 움직임도 같이 움직인다.

사용된 기술 : SVG 애니메이션, Javascript 

(*클론코딩 추천)

 

현재 애플사이트에서 적용된 사이트는 에어팟 프로, 아이패드 에어 신형, 아이폰12 

아래 링크가 포함되어 있다.

 

해당 아이디어를 이용해 기획을 한다면,

음악과 패션등 다양한 분야의 제품과 프로모션 사이트에 활용도가 높을 듯하다.

 

클론코딩을 통해서 학습하면 인터렉션 디자인에 많은 도움이 될것같다.

찾아보니, 맨아래에 애플사이트를 참고해 클론코딩 하는 과정이 인프런에 이미 있어서 링크를 첨부해 두었다.

 

www.apple.com/kr/airpods-pro/

AirPods Pro

www.apple.com/kr/iphone-12-pro/

iPhone 12 Pro 및 iPhone 12 Pro Max

www.apple.com/kr/apple-watch-series-6/

Apple Watch Series 6

 

-

 

인프런의 애플 클론코딩 강좌.

 

 

www.inflearn.com/course/%EC%95%A0%ED%94%8C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98-%ED%81%B4%EB%A1%A0#

애플 웹사이트 인터랙션 클론! - 인프런

 

 

ㅎㅎ 이런 재미있고 멋진 인터렉션을 만날때마다, 앞으로의 웹디자인의 발전이 기대가 된다.