javascript - 视差旋转和移动

Question

我正在尝试学习如何构建视差站点，我决定创建一个有汽车和道路的小场景。我有云和汽车以及背景和一些运行良好的项目。然而，道路上有一座小山，我想弄清楚如何在页面上的特定位置旋转汽车并使其在沿着道路行驶时向上移动，然后将其向下旋转并在行驶时向下移动沿着路走。我无法找出确定何时何地旋转、向上移动然后返回的最佳方法。如果有人能帮助我那就太棒了。我把代码放在 fiddle 上供您查看。 http://jsfiddle.net/xmukh8p8/

JavaScript 在这里:

$(window).bind('scroll', function(e){
     parallaxScroll();
});

function parallaxScroll() {

     var scrolled = $(window).scrollTop();
     var rotate = 1;
     console.log(scrolled);


     $('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
     $('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');

     $('.car').css('left', (0+(scrolled*.2)) + 'px');
     if (scrolled > 1026 && scrolled < 1396) {
          $('.car').css('transform', 'rotate(' + (rotate--)+ 'deg)');
     }

}

        $.jInvertScroll(['.scroll'], {
            height: 6000,
            onScroll: function(percent) {
            //code
             }
        });

Answer 1

我已经开始实现你想要的，但你需要微调一些值才能使其完美。实现高度应该不会太困难:

编辑:改进的代码并添加了 fiddle 链接

   function parallaxScroll() {

     var scrolled = $(window).scrollTop();
     console.log(scrolled);


     $('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
     $('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');

     $('.car').css('left', (0+(scrolled*.2)) + 'px');
    console.log(scrolled);
     if (scrolled > 1026 && scrolled < 1396) {
             $('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg)');
     }
    else if(scrolled >= 1396  && scrolled < 2000){
             $('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg)');
    }
    else if(scrolled >= 2000 && scrolled < 2197){
             $('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg)');

    }
    else{
        $('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
    }

}

Updated Fiddle

编辑2:

在翻译中添加了良好的措施。再次需要一些调整，但逻辑是存在的:

function parallaxScroll() {

     var scrolled = $(window).scrollTop();
     console.log(scrolled);


     $('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
     $('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');

     $('.car').css('left', (0+(scrolled*.2)) + 'px');
    console.log(scrolled);
     if (scrolled > 1026 && scrolled < 1396) {
             $('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg) translate(0px,'+(-((scrolled-1026)/3))+'px)');
     }
    else if(scrolled >= 1396  && scrolled < 2000){
             $('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg) translate(0px,'+(-(1396-1026)/3)+'px)');
    }
            else if(scrolled >= 2000 && scrolled < 2197){
             $('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg) translate(0px,'+(-(1396-1026)/3+((scrolled-2000)/3))+'px)');

    }
    else{
        $('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
    }

}

Fiddle with translation and rotation