Question

我试图在页面滚动上沿着正弦波跳动一只袋鼠，但是已经离开学校差不多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')
    }

任何人都想关注此事吗？

Answer 1

这可能是因为它对滚动变化有点敏感......也许Math.sin(scrolledY)应该是Math.sin(scrolledY/30)左右。传递给Math.sin的数字（scrolledY）是弧度所以....每个6.28是一个完整的正弦波。意思是目前每6个像素都是通过一个完整的正弦循环，这意味着滚动可能看起来很随机。

在页面滚动上沿着余弦波动画一只袋鼠

1 个答案: