我希望我的标题有一个缩小效果,加载放大的内容,以及滚动它缩小.
我所做的是通过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();
- });
- });
解决方法
我使用
window.requestAnimationFrame进行了平滑缩放
@L_403_2@.由于您在每个滚动事件上触发翻译,因此缩放动画会振动.想想这样：
>用户滚动
> 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);
