javascript - この背景スクロール効果を実現するにはどうすればよいですか?

Question

下にスクロールすると、各背景セクションが互いに重なり合う方法が本当に気に入っています。私はそれがたくさん行われるのを見てきました: ここにリンクがあります: http://www.soleilnoir.net/believein/

同様の効果を達成する方法はありますか？

ありがとう

Answer 1

この効果は視差と呼ばれます。

この効果に関連するいくつかのリンクを次に示します。

• Nike の素晴らしいデモhttp://www.nike.com/jumpman23/aj2012/
• 視差のコレクションhttp://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (各例を確認してください。いくつかは本当に素晴らしいものです!例: http://benthebodyguard. com/index.php http://www.siebennull.com/ http://janploch.de/ )
• Mercedez クラス A の Web サイトhttp://a-class.mercedes-benz.com/com/en/index.html#!/?s=li​​ve (実際には視差ではありませんが、それでも素晴らしい)
• 視差効果を使った画像スライダーの作り方のチュートリアルhttp://tympanus.net/codrops/2011/01/03/parallax-slider/
• さまざまな効果を持つ別のチュートリアルhttp://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• 視差を行うライブラリhttps://github.com/cameronmcefee/plax
• 別のライブラリhttps://github.com/markdalgleish/stellar.js

これも好きかもしれません：

• http://johnpolacek.github.com/scrollorama/
• http://joelb.me/scrollpath/

Answer 2

スクロールのオフセット位置を監視し、そのスクロール位置に基づいてさまざまな要素をアニメーション化することで、これを実現できます。イベント リスナーを設定し、特定の位置で関数を起動して、要素をページ上でアニメーション化します。

jQuery を使用している場合は、次のようになります。

$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() { 
    var scrollPos = $(window).scrollTop();
    switch (scrollPos) {
        case (500):
           doSomething();
           break;
        case (1000):
           doSomethingElse();
           break;
    }
}

function() doSomething {
   // use animate to animate element(s) at 500
}
function() doSomethingElse {
   // use animate to animate element(s) at 1000
}

それよりも最適化できると確信していますが、始めるにはそれで十分なはずです。