この背景スクロール効果はどのようにして達成できますか？

Question

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

どのように同様の効果を達成するためのアイデア？

おかげ

Answer 1

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

は、この効果に関連するいくつかのリンクです：ナイキhttp://www.nike.com/jumpman23/aj2012/

から

• 素晴らしいデモ視差http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-designのコレクション（いくつかは本当に素晴らしいです、それぞれの例を参照してください例：！http://benthebodyguard.com/index.phphttp://www.siebennull.com/をhttp://janploch.de/）
• メルセデスAクラスのウェブサイトは本当に視差が、それでも素晴らしい）を使用して、画像のスライダーを作成する方法について
• チュートリアルではありませんhttp://a-class.mercedes-benz.com/com/en/index.html#!/?s=live（パララックス効果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/markdalgleish/stellar.js

ます。また、このようなことがあり、視差https://github.com/cameronmcefee/plax

を行うためのライブラリ：

• 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 
} 

を、私はそれよりも優れて最適化することができることを確信しているが、それは始めるのに十分でなければなりません。