スクロールでdivの不透明度を変更します

Question

ページを下にスクロールすると、次のDIVが前のページの上に消えるようにするにはどうすればよいですか？

私はこのフィドルをより良く説明するために設定しました：http://jsfiddle.net/meEf4/176/
たとえば、ページの途中にいる場合、背景は青です。

編集：これはjsFiddleの内容です。これは爆発し、誰かが同様の問題を抱えている場合のためです。

<style> 
html, body, #red, #green, #blue { height: 100%} 
#container { height: 300%} 
#red, #green, #blue { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
#red { background:red; z-index: 5} 
#blue { background:blue; z-index: 4} 
#green { background:green; z-index: 3}​  
</style> 

<div id="container"> 
    <div id="red"></div> 
    <div id="blue"></div> 
    <div id="green"></div> 
</div>​ 

Answer 1

あなたはそれをこのような何か行うことができます：あなたはthe number of background divs - 1で割っmaxScroll valueを使用してターゲットにする必要がある背景のdivにスクロール値をマッピング

var target = $('div.background'); 
var targetHeight = target.height(); 
var containerHeight = $('#container').outerHeight(); 

var maxScroll = containerHeight - targetHeight; 
var scrollRange = maxScroll/(target.length-1); 

$(document).scroll(function(e){ 
    var scrollY = $(window).scrollTop(); 
    var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange; 
    var divIndex = Math.floor(scrollY/scrollRange); 

    target.has(':lt(' + divIndex + ')').css('opacity', 0); 
    target.eq(divIndex).css('opacity', scrollPercent); 
    target.has(':gt(' + divIndex + ')').css('opacity', 1); 
});​ 

WORKING DEMO FIDDLE

を。この数値は、バックグラウンドdivがカバーしなければならないスクロール範囲です。次に、scroll valueモジュラスthe scroll rangeを使用して、そのdivのスクロールパーセンテージを計算します。ターゲットdivの値が1から0になるようにします。

次に、あなたがあなたのターゲットのdivが計算された値に設定し、以下のdivの不透明度1を持っている（彼らは前に0に1の彼らの範囲を経ているため）、それ以上のdivは不透明度0を持つ

Answer 2

このソリューションは、することができそれは、より汎用的にするために改善したが、それは私はあなたが数学で遊んでする必要があると思う開始

$(document).ready(function() { 

     var colordivs = $('#container div'); 

     $(document).scroll(function(e) { 
      var scrollPercent = ($(window).scrollTop()/$('#container').outerHeight()) * 100; 

      if (scrollPercent > 0) { 
       if (scrollPercent < 33) { 
        var opacity = 1 - (scrollPercent/33); 
        $(colordivs[0]).css('opacity', opacity); 
       } 
       else if (scrollPercent > 66) { 
        var opacity = 1 - (scrollPercent/100); 
        $(colordivs[0]).css('opacity', 0); 
        $(colordivs[1]).css('opacity', 0); 
        $(colordivs[2]).css('opacity', opacity); 
       } 
       else if (scrollPercent > 33) { 
        var opacity = 1 - (scrollPercent/66); 
        $(colordivs[0]).css('opacity', 0); 
        $(colordivs[1]).css('opacity', opacity); 
       } 
      } 
     }); 

    });