Prallax Effect with text

Question

私のウェブサイトでは、一種の視差効果を使いたいと思っています。しかし、通常は、背景の画像を画面に固定するだけで、「上に」スクロールすることができます。私が望むのは、すべてのコンテンツで同じことです。

ウェブサイトは1ページで、いくつかのセクションがあります。セクションのEa hには、ランドスケープ画面で100vhの最小高さがあります。セクション1がビューポート内にある場合、セクションの最下部が画面の下部に達するまで、ユーザーはスクロールしなければなりません。次の容器がビューポートに入る瞬間、セクション1は固定され、セクション2はセクション1の上を1枚のシートのようにスライドし、最初に底部の内容物を覆う。

どうすればよいですか？私は完全にコード化された例は必要ありません、あなたがこれをやる方法についてのちょっとしたアイデアです。

ありがとうございます。

---

いくつかの詳細

私は私が取得しようとしているものの私の説明が少し曖昧だと思い、私はこのビット拡張するつもりです。

はあなたがすべてのシートの上に、一部のコンテンツがあり、紙の5枚を持っている想像し、のは、別のシートの上に、いくつかの 特長などを についてセクションをしましょう。今度はすべてのシートにビューポートの高さがあるので、表示されるのはその用紙だけです。コンテンツがビューポートより大きい場合は、シートが大きくなります。これはかなり明白です。ページを下にスクロールすると、用紙の端がビューポートの境界に一致するまで上にスクロールする必要があります。この紙をスクロールするときに上に移動する代わりに、正確な場所にとどまります。新しいレイヤーのように、シート2の新しいコンテンツがその上をスライドします。

Answer 1

おそらくこのような意味ですか？

<main> 
    <section class="orange fixed"> 
    <h2> 
     Some text 
    </h2> 
    </section> 
    <section class="blue"> 
    <h2> 
     Some text 
    </h2> 
    </section> 
    <section class="orange"> 
    <h2> 
     Some text 
    </h2> 
    </section> 
</main> 

JS：

var $sections = $('main section'); 
var sectionHeight = $sections.eq(0).outerHeight(); 
var setCurrent = function(position) { 
    $sections.eq(position).addClass('fixed').siblings().removeClass('fixed'); 
} 

$(window).on('scroll', function() { 
    var scTop = $(window).scrollTop(); 
    var position = Math.ceil(scTop/sectionHeight); 
    setCurrent(position - 1); 

}) 

そして、いくつかのSASS

body { 
    margin: 0; 
} 

main { 
    padding: 0; 
    padding-top: 100vh; // this is the trick 
    section { 
    height: 100vh; 
    text-align: center; 
    color: white; 
    padding-top: 200px; 
    position: relative; 
    margin: 0; 
    h2 { 
     margin: 0; 
     padding: 0; 
    } 
    &.orange { 
     background: orange; 
    } 
    &.blue { 
     background: blue; 
    } 
    &.fixed { // this is the trick 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
    } 
    } 
} 

あなたはここでそれをテストすることができ

https://jsfiddle.net/3r1Lm4ha/8/

PS（たぶんもっと更新）：即興のだろうあなたが探しているものであるかどうかまだ分かりません