2

ページのスクロールでカンガルーが正弦波に沿ってジャンプするアニメーションを作成しようとしていますが、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')
    }

これを試してみたい人はいますか？

4

1 に答える 1

2

おそらく、スクロールの変更に少し敏感だからです....多分そうMath.sin(scrolledY) あるべきMath.sin(scrolledY/30)です。Math.sin に渡される数値 (scrolledY) はラジアンであるため、.... 6.28ish ごとに完全な正弦波になります。つまり、現在 6 ピクセルごとに完全なサイン ループを通過していることを意味します。つまり、スクロールはおそらくかなりランダムに見えます。

于 2012-08-30T02:52:34.890 に答える