jquery - 在页面滚动中沿余弦波对袋鼠进行动画处理

我正在尝试为袋鼠动画，使其在页面滚动中沿正弦波跳跃，但是已经失学了将近15年，我无法锻炼数学来实现这一目标。我在下面的尝试中已经接近某个地方，但看起来袋鼠正变得癫痫发作，并在整个地方上下跳跃。

这是我的CSS

.bgRoo{
    position: fixed;
    background: url(../images/bg-roo.png) no-repeat;
    width: 225px; height: 239px;
    left: 50%; margin-left: 250px;
    border: red; margin-top: 400px;}

和我的jQuery

$(window).bind('scroll',function(e){
        parallaxScroll();
    });

    function parallaxScroll(){
        var scrolledY = $(window).scrollTop();
        $('.bgRoo').css('top',''+((Math.sin(scrolledY)*30)+(scrolledY*0.1))+'px');
        $('.bgRoo').css('margin-left',(250+scrolledY)+'px')
    }

有人愿意尝试一下吗？

最佳答案

可能是因为它对滚动更改有点敏感.... Math.sin(scrolledY)应该是Math.sin(scrolledY/30)左右。传递给Math.sin的数字（scrolledY）以弧度表示，因此....每6.28ish是一个完整的正弦波。表示当前每隔6个像素就会出现一个完整的正弦循环，这意味着滚动概率看起来非常随机。