使用jQuery平滑CSS 2D转换

时间:2012-04-27 06:07:12

标签: jquery css3

我最近遇到过这个网站http://www.smartusa.com/ 这具有令人敬畏的滚动效果和元素的平滑缩放。

任何人都可以帮我弄清楚用于实现平滑缩放效果的逻辑吗?不是视差滚动,而是汽车的缩放。

我尝试了jQuery.Transition.js插件并添加了一个滚动事件,但转换非常紧张。它在任何地方都无法像上面的网站那样平滑。我停止排队并将持续时间缩短到10毫秒,但仍然不够好。

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

您可以尝试使用TransformJS - 它使用CSS3 3D变换(即使您只为一个或两个维度制作动画),以便在硬件可用时强制浏览器硬件加速动画。

http://transformjs.strobeapp.com/

它也很好地集成到jQuery中。

答案 1 :(得分:1)

不确定这是否是您使用的插件: https://github.com/heygrady/transform/wiki

但是对于像这样的动画库,你会做类似的事情:

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