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，但无法将图像“绑定”到路径:(

//格拉夫

4

2 回答 2

1

我尝试使用您的 html 和 css 文件以及演示站点中的代码使其与 jQuery Scrollpath 一起使用。

检查这是否适合您：http: //jsfiddle.net/Skr4R/6/embedded/result/

您还可以检查小提琴的来源：http: //jsfiddle.net/Skr4R/6/

对此很重要的是，整个包装器移动和旋转，这就是为什么在我的解决方案中，火车图像位于包装器之外，如下所示：

<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 回答