Question

我正在努力学习如何建立一个视差网站，我决定创建一个带有汽车和道路的小场景。我有云和车以及背景和一些项目运作良好。然而，道路上有一座小山，我想知道如何在页面上的特定位置我可以旋转汽车并让它向上移动，然后向上旋转然后将其向下旋转并向下移动走在路上。我无法找出确定旋转位置和向上移动然后向下移动的最佳方法。如果有人能帮助我那将是非常棒的。我把代码放在一个小提琴上供你查看。 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

我已经开始实现你想要的东西，你需要微调一些值，但要完美。实现高度不应该太难：

编辑：改进代码并添加小提琴链接

   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

视差旋转和移动

1 个答案: