scrollTop绑定的动画在手机上不能流畅执行。

Question

要做的事就是给一个顶部banner执行下滑的时候缩放的动画、思路是通过获取scrollTop的值、来执行缩放。

道理是这样，chrome模拟也是正常的，但是放在手机上后，就出现了滑动过程中不能执行缩放，得滑动停止之后，图片突然缩放到指定大小。

有没有什么好的插件，或者是不是得用touchmove?

    $(function(){
    var introSection = $('#cd-intro-background'),
        scaleSpeed = 1
    
    triggerAnimation();
    $(window).on('resize', function(){
        triggerAnimation();
    });

    function triggerAnimation(){
        $(window).scroll(function(){
            window.requestAnimationFrame(animateIntro);
        });
    }

    function animateIntro () {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;        
        var scrollPercentage = (scrollTop/1000).toFixed(5),
            scaleValue = 1 - scrollPercentage*scaleSpeed;    
            if(scaleValue >= 0.5) {
                introSection.css({
                '-moz-transform': 'scale(' + scaleValue + ') ',
                '-webkit-transform': 'scale(' + scaleValue + ') ',
                '-ms-transform': 'scale(' + scaleValue + ') ',
                '-o-transform': 'scale(' + scaleValue + ') ',
                'transform': 'scale(' + scaleValue + ') '
                });
            }else{
                 introSection.css({
                '-moz-transform': 'scale(0.5) ',
                '-webkit-transform': 'scale(0.5) ',
                '-ms-transform': 'scale(0.5) ',
                '-o-transform': 'scale(0.5) ',
                'transform': 'scale(0.5) '
                })
            }
    }
});