स्क्रॉल

Question

के साथ Jquery/जावास्क्रिप्ट अस्पष्टता एनीमेशन उपयोगकर्ता स्क्रॉल के आधार पर मैं किसी ऑब्जेक्ट पर अस्पष्टता को बदलना चाहता हूं (और संक्रमण एनिमेटेड है)। उदाहरण (http://davegamache.com/)

मैं हर जगह यहाँ की तरह खोज की है, लेकिन यह मुझे वेपोइंट प्लगइन की ओर इशारा करते समाप्त होता है (http://stackoverflow.com/questions/6316757/opacity- आधारित-ऑन-स्क्रॉल-स्थिति)

मैंने [waypoints] [1] प्लगइन लागू किया है और 100px से अधिक होने के बाद ऑब्जेक्ट लुप्त हो गया है। [ऑफसेट विशेषता का उपयोग] लेकिन मूल रूप से किसी ऑब्जेक्ट की अस्पष्टता को नियंत्रित करना चाहते हैं और एनीमेशन उपर्युक्त उदाहरण की तरह दिखाई दे सकता है।

मैंने सभी की खोज की है- यह मेरा आखिरी उपाय है। किसी भी मदद की बहुत सराहना की है।

Answer 1

काम कर रहा शुरू के साथ उदाहरण के लिए और यहाँ समाप्त होने के बिंदु: http://jsfiddle.net/z7E9u/1/

मैं बुनियादी कोड यहाँ

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity 
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity 
    ,fading = $('#fading') 
; 

$(window).bind('scroll', function(){ 
    var offset = $(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity).html(opacity); 
}); 

Answer 2

मुझे लगता है कि साइट के स्रोत कोड को देखा पेस्ट कॉपी। यह स्क्रॉल करने के लिए इवेंट श्रोता को बाध्य करने के लिए स्क्रॉल ऊंचाई निर्धारित करने के लिए $(document).scrollTop(); का उपयोग करता है, और $(window).scroll(function(){})।

इस प्रयास करें: http://jsfiddle.net/meEf4/

और कोड:

$(window).scroll(function(){ 
    var fromtop = $(document).scrollTop();  // pixels from top of screen 
    $('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading 
}); 

Answer 3

यहाँ एक काम कर उदाहरण है

var target = $('div'); 
var targetHeight = target.outerHeight(); 

$(document).scroll(function(e){ 
    var scrollPercent = (targetHeight - window.scrollY)/targetHeight; 
    if(scrollPercent >= 0){ 
     target.css('opacity', scrollPercent); 
    } 
}); 

हमें बस खिड़की की वर्तमान पुस्तक स्थिति हड़पने है, प्रश्न में तत्व का प्रतिशत अब ऑफ-स्क्रीन है, और उस प्रतिशत के साथ अपनी अस्पष्टता निर्धारित करें। fading केवल जब तक जैसे 0.2 अस्पष्टता तक पहुँच जाता है और फिर पेज भी स्क्रॉल

Answer 4

मैं इस समाधान

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity 
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity 
    ,fading = $('#fading') 
; 

$(window).bind('scroll', function(){ 
    var offset = $(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity).html(opacity); 
}); 

कैसे आप के लिए माउस स्क्रॉल इस्तेमाल कर सकते हैं पसंद है? समाधान जो मैंने पाया है अब तक माउस स्क्रॉलिंग फ़ंक्शन को पूरी तरह अक्षम कर दें

Answer 5

जैसा कि मेरे पास 50 से कम प्रतिष्ठा है, मैं लोनट के प्रश्न का उत्तर नहीं दे सकता, रिवर्स कैसे करें। यदि आप रिवर्स करना चाहते हैं, तो नेविगेशन बार के लिए काफी आसान है, तो मेरा कोड यहां दिया गया है।

$(window).scroll(function() { 
     var offset = $(document).scrollTop() 
     var opacity = 0; 
     if (offset <= 0) { 
      opacity = 0; 
     } else if (offset > 0 & offset <= 200) { 
      opacity = (offset - 1)/200; 
     } 
     else { 
      opacity = 1; 
     } 
     $('.black-background').css('opacity', opacity).html(opacity); 
    });