पृष्ठ स्क्रॉल के साथ jquery fade out div

Question

मैं पृष्ठ को स्क्रॉल करने के रूप में एक div बाहर फीका करने की कोशिश कर रहा हूं (पृष्ठ स्क्रॉल के साथ - केवल एक फीड आउट प्रभाव नहीं)। मैं यहाँ कोड के इस टुकड़े का उपयोग कर नीचे के रूप में पृष्ठ स्क्रॉल div की अपारदर्शिता को समायोजित कर रहा हूँ:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
     $('.logo_container').css({'opacity':(100-scroll)/100}); 
}); 

मेरे यहां मुद्दा है कि मेरे लिए यह बहुत तेजी से फ़ेड आउट, मैं एक अधिक सूक्ष्म फीका करना चाहते हैं जैसे उपयोगकर्ता स्क्रॉल करता है। क्या कोई धीमा, अधिक सूक्ष्म फीका बनाने के लिए बेहतर तर्क के बारे में सोच सकता है।

यहाँ

Answer 1

समाधान कार्रवाई में मेरी कोड दिखाने वाला JSFIDDLE है एक

jQuery चेतन

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    $('.logo_container, .slogan').stop().animate(
     {opacity: ((180-scroll)/100)+0.1}, 
     "slow" 
    ); 
}); 

समाधान बी

सीएसएस संक्रमण

.wrapper { 
    height:1000px 
} 
.logo_container { 
    background:red; 
    width:250px; 
    height:500px; 
    position:relative; 
    margin:0px auto; 
    transition: opacity 1s ease; 
} 

Answer 2

वह हिस्सा (1000-scroll)/1000

JSFIDDLE

आशा है कि यह मदद करता है

Answer 3

यह बहुत सरल तर्क के साथ इस FIDDLE साथ ठीक काम करता है को बदलने के द्वारा समाधान में सुधार हुआ। jQuery के इस टुकड़े प्रयुक्त यह काम कर रहे हैं:

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 
    var height = $(window).height(); 

    $('.logo_container, .slogan').css({ 
     'opacity': ((height - scrollTop)/height) 
    }); 
}); 

(ऊंचाई - scrollTop)/ऊंचाई मूल्य सेट जो है रैखिक रूप 1 0 पर

उदाहरण देता है:

ऊंचाई = 430 पीएक्स और scrollTop = 233px।

(ऊंचाई - स्क्रोलटॉप)/ऊंचाई अस्पष्टता 0.45 लगभग देगी।