Question

我正在尝试为一个项目创造一个过山车，需要过山车沿着一条路走。

上看到我的插图

我需要红色的盒子在后台跟随过山车道路？红色框说明了我要使用的图像。这可能吗？我正在尝试使用此代码...

<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

Answer 1

我试图使用你的html和css文件以及演示站点的代码来使用jQuery Scrollpath。

检查这是否合适：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>

希望这能让你开始。如果你想要火车移动，它可能不是最好的解决方案，而不是它的周围环境。

Answer 2

我正在尝试实现相同的过程，这对我有所帮助，关于使用轨道对火车/物体进行旋转的前进方式，您可以不旋转背景（轨道使列车看起来像跟踪轨道）

滚动页面时弯曲的图像路径

2 个答案: