我希望我的标题有一个缩小效果,加载放大的内容,以及滚动它缩小.
我所做的是通过transform：scale(1.4)增加大小,滚动时我从scrollTop和header height计算一个百分比,然后我将它乘以0.4.问题是在滚动时屏幕开始振动,刻度不平滑.你知道我的代码有什么问题吗？或者你能告诉我实现这个目的的最佳做法是什么？
jQuery(document).ready(function(){
function zoom_out() {
var page_header_height = jQuery('#page-header-custom').outerHeight();
var scroll_top = jQuery(window).scrollTop();
var zoom_multiplier = 0.4;
var multiplier = (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height))) > 1 ? 1 : (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height)));
if(multiplier <= 1) {
jQuery('#page-header-inner').stop(true,true).transition({ scale: 1/(1+multiplier),translate: '0,-50%' });
jQuery('#page-header-custom').stop(true,true).transition({
scale: 1+multiplier
});
}
}
zoom_out();
jQuery(window).on('scroll',function(){
zoom_out();
});
});
我创建了一个JSFiddle来看它的实际效果.
解决方法
我使用
window.requestAnimationFrame进行了平滑缩放
updated your Fiddle.由于您在每个滚动事件上触发翻译,因此缩放动画会振动.想想这样：
>用户滚动
> zoom_out()被触发并告诉元素转换它的变换属性.您的元素现在以特定速度转换：“长度”/转换时间.
>已经过了更多滚动事件,并且都触发了zoom_out().下一次转换可能以不同的速度发生,导致“振动”动画.
首先,你可以摆脱jQuery的transition()方法.如果以60fps或接近60fps的速度发射该功能,它将会平滑地动画到人眼,无需过渡或动画.
if(multiplier <= 1) {
//jQuery('#page-header-inner').stop(true,-50%' });
//jQuery('#page-header-custom').stop(true,true).transition({ scale: 1+multiplier });
//becomes:
jQuery('#page-header-inner').css({ scale: 1/(1+multiplier),-50%' });
jQuery('#page-header-custom').css({ scale: 1+multiplier });
}
}
获得以~60fps触发的功能可以通过多种方式实现：
Throttle你的滚动事件为60fps.
或者像更新的Fiddle一样使用window.requestAnimationFrame
function zoom_out(){
//calculation code & setting CSS
window.requestAnimationFrame(zoom_out);
}
//trigger it once instead of the scroll event handler
window.requestAnimationFrame(zoom_out);