php - 固定滚动对象路径

Question

我正在寻找一个网站，当它被加载时，屏幕中间有一辆微型汽车的顶视图。汽车在一条路径上，当您滚动时，汽车将围绕这些曲线转弯。目前我真正能做的就是用 CSS 给汽车一个固定在屏幕中间的位置，然后将道路图像设置为背景。这条路现在必须是笔直的，因为我不知道在哪里或如何使它转向这些路径。我什至从哪里开始？

Answer 1

我做了一些小演示来向您展示可能的解决方案。它使用 css 渐变而不是“路径”，您必须进行大量更改才能实现多个预定义的转弯，但我认为效果很好：

http://jsfiddle.net/4Rkjg/5/

HTML：

<div class="bg"></div>
<div class="car"></div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-y: hidden;
    overflow-x: scroll;
}

.car {
    position: fixed;
    top: 48%;
    left: 45%;
    width: 10%;
    height: 30px;
    background: blue;
}

.bg {
    width: 5000px;
    height: 100%;
    background: #f6e6b4;
    background: -moz-linear-gradient(left,  #f6e6b4 0%, #e01616 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f6e6b4), color-stop(100%,#e01616));
    background: -webkit-linear-gradient(left,  #f6e6b4 0%,#e01616 100%);
    background: -o-linear-gradient(left,  #f6e6b4 0%,#e01616 100%);
    background: -ms-linear-gradient(left,  #f6e6b4 0%,#e01616 100%);
    background: linear-gradient(to right,  #f6e6b4 0%,#e01616 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#e01616',GradientType=1 );
}

JS：

$(function(){

    var $car = $('.car');
    var $bg = $('.bg');
    var carPosition = $car.position();

    var maxOffset = $bg.width() - $(window).width();

    $(window).scroll(function(e){
        var offset = $('body').scrollLeft();

        if(offset < maxOffset/2)
            var degree = offset / 100;
        else
            var degree = (maxOffset-offset)/100;

        // change rotation
        $car.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
        });

        // change vertical position
        $car.css({
            'top': carPosition.top + offset/100
        });     
    });
});