jquery - Jquery 視差効果

Question

私は多くの多くの視差チュートリアルを見てきましたが、実際に達成する必要があるものには複雑さが多すぎます.

基本的に、私がやりたいのは、たとえば..

ロケット船。スペースの背景。そして、ユーザーが下にスクロールすると、ロケット船はスクロールの 2 倍または半分の速度でスクロールします。xまたはyで？誰にもアイデアはありますか？

Answer 1

もちろん。私はたくさんのアイデアを持っています。これはあまり複雑に聞こえません。

関数のスコープ外に変数を作成します。のような名前last_positionを付け、値を にし0ます。

var last_position = 0;

次に、スクロール イベントをキャプチャします。

$(window).scroll(function(){

});

次に、スクロールで上から移動した距離をキャプチャします。この変数を last_position 変数に保存し、if ステートメントを作成します。

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

いいえ、これらの if ステートメント内で、それぞれ距離.animate()を設定するために使用します。top & left目的の効果を達成するために、どんな数学でも計算してください。.stop()もう一度呼び出す前に、各アニメーションが必要になることに注意してください。そうしないと...まあ、理由がわかります..

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

自分で試してみてください。