2012-11-22 5 views
-1

방금이 달콤한 헤더 애니메이션 (http://anchorage-theme.pixelunion.net/)을보고 사이트에서 이와 같은 효과를 구현하는 방법을 궁금해했습니다. 나는 HTML과 CSS에 매우 능통하며 자바 스크립트로 다뤄 봤지만 결코 깊숙이 들어 가지 못했습니다. 어쩌면 이것이 시작하는 곳일 수 있습니다.자바 스크립트 헤더 애니메이션 Tumblr

하지만이 헤더에 대해 어떻게 생각합니까?

답변

3

이것은 애니메이션이 아니기 때문에 Parallax Scrolling이라는 기술입니다.

아이디어는 3D TV에서 사용되는 "시차"착시를 모방하여 페이지가 스크롤되는 동안 (즉, "배경"요소가 "전경"요소보다 느리게 움직이는) 깊이의 효과를 추가하는 것입니다.

페이지의 스크롤 위치를 사용하여이 효과를 얻기 위해 다양한 요소의 위치, 불투명도, 회전 또는 기타 속성을 동적으로 설정합니다.

는 여기에 간단한 튜토리얼입니다 : http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

+0

PS -이 called' 시차'비록,이 기술이 실제로 전혀 시차를 사용하지 않습니다. 실제로는 원근법 전환입니다. –

관련 문제