Parallax rotating and moving

Question

I am trying to learn how to build a parallax site and I decided to create a little scene with a car and a road. I have the clouds and car along with the background and a few items working well. However, the road has a hill on it and I want to figure out how at a specific spot on the page I can rotate the car and have it move up as it goes up the road then rotate it back down and move it down as it goes down the road. I can't figure out the best way to determine where and when to rotate and move up and then back down. If anyone could help me that would be awesome. I have the code put on a fiddle for you to view. http://jsfiddle.net/xmukh8p8/

and the javascript is here:

$(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

I've begun to implement what you want, you'll need to fine tune some of the values though to get it perfect. Implementing the height shouldn't be too difficult with this:

EDIT: Improved code and added fiddle link

   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

EDIT 2:

Added in the translation for good measure. Again some tweaking is needed but the logic is there:

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