स्क्रॉल

Question

पर div opacity बदलें मैं इसे कैसे बना सकता हूं ताकि जब आप पृष्ठ को स्क्रॉल करते हैं, तो अगला DIV पिछले के शीर्ष पर फीका होता है?

मैंने इसे बेहतर तरीके से चित्रित करने के लिए इस पहेली को स्थापित किया है: http://jsfiddle.net/meEf4/176/
तो उदाहरण के लिए यदि आप पृष्ठ के नीचे आधे रास्ते हैं, तो पृष्ठभूमि नीली है।

संपादित करें: यहां जेएसफ़िल्ड की सामग्री है, अगर कभी विस्फोट हो और कोई भी इसी तरह के मुद्दे से फंस गया हो।

<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

आप यह कुछ इस तरह कर सकते हैं:

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

आप आप उपयोग कर maxScroll valuethe number of background divs - 1 से विभाजित लक्षित करने की आवश्यकता पृष्ठभूमि div करने के लिए स्क्रॉल मूल्य मैप करें। यह संख्या स्क्रॉल रेंज है जिसे एक पृष्ठभूमि div को कवर करना है। फिर आप scroll value मॉड्यूलस the scroll range का उपयोग कर उस div के लिए स्क्रॉल प्रतिशत की गणना करते हैं, इस तरह आप लक्ष्य div के लिए 1 और 0 के बीच मान प्राप्त करते हैं।

तो फिर तुम परिकलित मूल्य के लिए अपने लक्ष्य div निर्धारित करते हैं, divs नीचे अस्पष्टता 1, यह ऊपर divs अस्पष्टता 0 (क्योंकि वे पहले 0 से 1 की अपनी सीमा के माध्यम से चला गया है)

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

    });