0

2つのdivがあります。それらを＃div_1と＃div_2と呼びましょう。両方のdivにコンテンツがあります。私がやりたいのですが、理解できません。ユーザーがページをスクロールすると、画面から押し出されたように、div_1が画面の上部に表示されなくなるのを確認したいと思います。同時に、div_2がdiv_1の下に表示されるようになります。次に、div_2が完全に表示されると、必要に応じてdiv_2をスクロールできるようになります（遅延スクロール）。

次の行に沿って：http：//eephusleague.com/magazine/

私はすでにたくさんのスニペットを書いて編集しようとしましたが、その方法がわからないようです。私はjQueryを初めて使用するので、可能であれば例をいただければ幸いです。

前もって感謝します

4

2 に答える 2

1

これらの種類の効果を作成するために利用できる jquery プラグインはたくさんあり、最近では非常に人気があります。以下の視差スクロール Web サイトと呼ばれるものは、いくつかのプラグインです。

http://markdalgleish.com/projects/stellar.js/demos/

http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

http://johnpolacek.github.com/scrollorama/

http://joelb.me/scrollpath/

http://curtain.victorcoulon.fr/#intro

ウェブサイトの例:

http://www.1stwebdesigner.com/inspiration/parallax-website-design/

于 2012-06-19T06:24:41.203 に答える
0

あなたが見たり言ったりするのは視差スクロールです。

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

いくつかのjQueryプラグインがありますが、それがどのように機能するかに関係なく、私はあなたに小さな例を与えることができます:

ドキュメントのスクロールでは、jquery イベントです。

   $(window).scroll(function() {


   });

ユーザーがネイティブブラウザのスクロールバーでウィンドウをスクロールすると、この関数内のすべてが反応します。

次のように、この関数内にいくつかのチェックを入れることができます。

if ($(this).scrollTop() > 10) {
    // if current window top position greater than 10 you cant let move some elements
    $('#div_2').css{top:$(this).scrollTop()};
}

すべて一緒に:

   $(window).scroll(function() {

      if ($(this).scrollTop() > 10) {
         $('#div_2').css{top:$(this).scrollTop()};
      }

   });

これは非常に基本的なことです

現在のスクロール方向を取得するための追加:

var oldPos = 0;
function getScrollDirection(actPos) {

   if (actPos > oldPos) {
       console.log("down");
   } else {
       console.log("up");
   }
   oldPos = actPos;

},

この関数を次のようにスクロール イベント内に配置します。

$(window).scroll(function() {

      getScrollDirection($(this).scrollTop());

});

これで、サイト用に独自のパララックス スクロールを構築するためのツールと情報が得られました :-)

私はこのプラグインが最高だと思います:

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

だから私はこれが役立つことを願っています。

于 2012-06-19T06:37:52.913 に答える