Question

I’ve been looking at many many many paralax tutorials, there’s been way too much complication for what I actually need to achieve, and I’m sure there’s some tricky yet easier way without plugins to do it.

Basically, All i want to do is have for example..

A rocket ship. On a space background. And when the user scrolls down, the rocket ship would scroll at say double or half the speed of the scroll. in x or y? Does anyone have any ideas?

Answer 1

Sure. I’ve got lots of ideas. This doesn’t sound overly complicated.

Create a variable outside of the scope of the function. give it a name like last_position, give it a value of 0.

var last_position = 0;

Now capture the scroll event.

$(window).scroll(function(){

});

Now, capture the distance we travel from the top on scroll. Save this variable into the last_position variable, and create an if statement.

$(window).scroll(function(){
  var winTop = $(this).scrollTop(); 
  if(winTop > last_position){
    //we're scrolling down
  }else{
    //we're scrolling up
  }
  //update last_position here
  last_position = winTop;
});

No, within those if statements, use .animate() to set the top & left distances respectively. Calculate with whatever math you’d like to achieve your desired effect. It’s important to note you’ll want to .stop() each animation before you call it again. If you don’t…well, you’ll see why..

$(window).scroll(function(){
  var winTop = $(this).scrollTop(); 
  if(winTop > last_position){
    $('#spaceship').stop(true).animate({
      top: "+=15px",
      left: "-=15px"
    });
  }else{
    $('#spaceship').stop(true).animate({
      top: "-=15px",
      left: "+=15px"
    });
  }
  //update last_position here
  last_position = winTop;
});

Try it out yourself.