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
        });     
    });
});