jQuery를 사용하여 매끄러운 CSS 2D 변환

Question

최근에이 웹 사이트를 방문했습니다 http://www.smartusa.com/ 놀라운 스크롤 효과와 부드러운 요소 배율이 있습니다.

누구나 부드럽게 스케일링 효과를 내기 위해 사용 된 논리를 이해할 수 있습니까? 시차례 스크롤이 아니라 자동차의 스케일링.

나는 jQuery.Transition.js 플러그인을 시도하고 스크롤 이벤트를 추가했지만 변형은 상당히 불안정합니다. 위의 사이트에서 효과가 부드럽지 않습니다. 큐잉을 멈추고 지속 시간을 10ms로 줄 였지만 여전히 좋지는 않았습니다.

도움을 주시면 감사하겠습니다.

Answer 1

TransformJS를 사용해보십시오. 하드웨어를 사용할 수있을 때 브라우저가 하드웨어 가속을 사용하도록 강제하기 위해 CSS3 3D 변형을 사용합니다 (하나 또는 두 개의 치수 만 애니메이션화하더라도).

http://transformjs.strobeapp.com/

는 또한 잘 jQuery를에 통합됩니다. https://github.com/heygrady/transform/wiki

하지만 같은 애니메이션 라이브러리 , 당신은 같은 것을 할 것 : 이것은 당신이 사용하고있는 플러그인의 경우

Answer 2

확실하지

$(window).scroll(function(e){ $('.example').transform({rotate: e.scrollTop }); });