Modifica opacità div sulla casella di scorrimento

Question

Come posso fare in modo che quando si scorre verso il basso della pagina, il DIV successivo sfuma sopra il precedente?

Ho impostato questo violino per illustrarlo meglio: http://jsfiddle.net/meEf4/176/
Quindi, ad esempio, se sei a metà della pagina, lo sfondo è blu.

Modifica: ecco i contenuti di quel jsFiddle, nel caso che mai esploda e qualcuno è bloccato con un problema simile.

<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

Si può fare qualcosa di simile:

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

Si mappa il valore di scorrimento per lo sfondo div è necessario indirizzare utilizzando il maxScroll value diviso per the number of background divs - 1. Questo numero è l'intervallo di scorrimento che deve essere coperto da un div di sfondo. Quindi si calcola la percentuale di scorrimento per quel div utilizzando il modulo scroll valuethe scroll range, in questo modo si ottiene un valore compreso tra 1 e 0 per il div target.

Poi si imposta il div target al valore calcolato, i div di seguito hanno l'opacità 1, div sopra di esso ha l'opacità 0 (perché sono andati attraverso la loro gamma di 1 a 0 prima)

Answer 2

Questa soluzione può essere migliorato per renderlo più generico, ma è un inizio

$(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); 
       } 
      } 
     }); 

    });