Question

我想为我的标题缩小效果，加载放大的内容，以及滚动缩小效果。

我所做的是使用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来查看它的实际效果。

Answer 1

我updated your Fiddle使用window.requestAnimationFrame进行平滑缩放。缩放动画正在振动，因为您在每个scroll事件上触发翻译。想想这样：

用户滚动
zoom_out()被触发并告诉元素转换它的transform属性。您的元素现在以特定速度转换：“length”/ transitiontime。
更多scroll个事件已经过去，并且都在触发zoom_out()。下一次转换可能会以不同的速度发生，导致“振动”动画。

首先，你可以摆脱jQuery的transition()方法。如果以60fps或接近60fps的速度发射该功能，它将会平滑地动画到人眼，无需过渡或动画。

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 });
        //becomes:

        jQuery('#page-header-inner').css({ scale: 1/(1+multiplier), translate: '0, -50%' });
        jQuery('#page-header-custom').css({ scale: 1+multiplier });           
    }
}

以~60fps触发功能可以通过多种方式实现：

Throttle您的滚动事件为60fps。

或者在更新后的window.requestAnimationFrame

Fiddle

function zoom_out(){
  //calculation code & setting CSS

  window.requestAnimationFrame(zoom_out);
}

//trigger it once instead of the scroll event handler
window.requestAnimationFrame(zoom_out);

使用transform：scale进行滚动时的振动屏幕

1 个答案: