2

プロジェクトのジェットコースターライドを作成しようとしていますが、パスをたどるにはジェットコースターが必要です。

ジェットコースターで私のイラストを見ることができます

バックグラウンドでジェットコースターの道路をたどるのに赤いボックスが必要ですか？赤いボックスは、これから使用する画像を示しています。これは可能ですか？このコードを使用しようとしています...

<script type="text/javascript">

        $(window).on('scroll', function(e) {
            var scrollTop = $(window).scrollTop();
            //var windowHeight = $(window).height();
            var windowHeight = $('.road2').height();
            //var S = scrollTop + Math.floor(windowHeight / 2);

            var S = $(this).scrollTop();            // scrolled distance
            var t = 0 + (S/windowHeight);                
            //var T = 0 + (S/36);                        // value for Top
            //var L = 300 + Math.abs(Math.sin(S/400)*460);  // value for Left
            //
            //$(".rollerImage").css({top: T+'%', left: L+'px'});    //set CSS

            var canvas_X=400;
            var canvas_Y=400;

            // Increment Parameterization
            t += 0.05;

            // Width of Car
            var car_X=150;
            // Hieght of Car
            var car_Y=50;

            // Point A
            var a_X=0;
            var a_Y=0;

            // Point B
            var b_X=canvas_X-car_X; //Place point B at the end
            var b_Y=0;

            // Center of Semi Circle
            var c_X=(b_X-a_X)/2;
            var c_Y=(a_Y-a_Y)/2;

            // Calculate X and Y point on trajectory 
            var x = a_X + t * (b_X- a_X);
            var y = Math.sqrt(Math.pow((b_X - a_X),2)/4 + Math.pow((x-c_X),2));

            $(".rollerImage").css({top: x+'px', left: y+'px'});    //set CSS

        });            
    </script>

誰かがこのタイプのパスアニメーションを手伝ってくれることを願っています。座標の配列でパスを定義することは可能でしょうか？

joel scrollpathを使用してみましたが、画像をパスに「バインド」できません:(

// Graahf

4

2 に答える 2

1

htmlファイルとcssファイルに加えて、デモサイトのコードを使用して、jQueryScrollpathで動作させるようにしました。

これで問題ないかどうかを確認します：http：//jsfiddle.net/Skr4R/6/embedded/result/

フィドルのソースを確認することもできます：http：//jsfiddle.net/Skr4R/6/

これにとって重要なのは、ラッパー全体が移動および回転することです。そのため、私のソリューションでは、次のようにtrain-imageがラッパーの外側にあります。

<div class="rollerCoasters">
  <img src="" style="background:red; height:100px; width:50px; position:absolute; top:380px; left:50%; z-index:200; margin-left:-25px">
</div>

<div class="wrapper">
  <div class="road1"><img src="base64-encoded-img" width="1434" height="539"/></div>
</div>

これで始められることを願っています。電車を動かしたいのであれば、それは最善の解決策ではないかもしれません。

于 2012-08-27T14:38:35.763 に答える
0

私は同じプロセスを達成しようとしていますが、これは私を助けてくれました。列車/オブジェクトをトラックで回転させる方法では、背景を回転させることができませんでした（列車がトラックをたどっているように見せるためのトラック）

于 2012-08-28T13:58:42.820 に答える