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

我希望我的标题有一个缩小效果,加载放大的内容,以及滚动它缩小.

我所做的是通过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来实现它.