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

Question

我正在尝试为一个项目创建一个过山车，并且需要过山车沿着一条路径行驶。

你可以在rollercoaster上看到我的插图

我需要红色框来跟随背景中的过山车道路吗？红色框显示了我将要使用的图像。这可能吗？我正在尝试使用此代码...

<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 ，但不能将图像“绑定(bind)”到路径 :(

//格拉夫

Answer 1

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

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

您还可以查看 fiddle 的来源: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>

希望这能让您入门。如果您想让火车移动而不是周围环境，这可能不是最佳解决方案。