在滾動div逐漸淡出淡出

我想創建淡入淡出效果與滾動，但不知道如何。它就像http://www.popsci.com/。如果滾動，則背景圖像（div id fixed-image）會變淡。他們的代碼就像。但我還無法弄清楚如何在我的代碼中輕鬆應用。請傢伙們檢查一下我的代碼。在滾動div逐漸淡出淡出

var opacity = 1; 
     var img = element.find('img'); 
     // Look for featured stories. 
     if (element.length > 0) { 
     // Attach background image element. 
     $('#page-wrapper').prepend('<div id="fixed-image" style="background-image: url(\'' + img.attr('data-lgsrc') + '\');"></div>'); 
     img.addClass('hidden'); 
     var scrollPercent; 
     $(window).scroll(function() { 
      // When User scrolls down, determine percentage from top to bottom of window. 
      scrollPercent = (($(window).scrollTop()/$(window).height() * 1.9) - 0.9); 
      if (scrollPercent < 0) { 
      $('#fixed-image').css({ 
       '-webkit-filter' : 'blur(0px)', 
       '-moz-filter'  : 'blur(0px)', 
       '-o-filter'  : 'blur(0px)', 
       '-ms-filter'  : 'blur(0px)', 
       'filter'   : 'blur(0px)' 
      }); 
      } 
      var opacityCount = 1.5 - Math.min(1.5, (scrollPercent + 1)); 
      $('#fixed-image').css('opacity', opacityCount); 
      if (scrollPercent <= 1) { 
      $('#fixed-image').css('opacity', opacityCount); 
      $('#fixed-image').css({ 
       '-webkit-filter' : 'blur(' + scrollPercent * 10 + 'px)', 
       '-moz-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       '-o-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       '-ms-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       'filter'   : 'blur(' + scrollPercent * 10 + 'px)' 
      }); 
      } 
      else { 
      $('.content-wrapper-outer').css('background-color', 'rgba(255,255,255,' + opacity + ')');

我的演示是在這裏https://jsfiddle.net/cyber007/6e6dbr6j/1/

我想滑塊類將是淡入淡出，並逐步立足於滾動

UPDATE

$(window).scroll(function(){ 
    $(".slider").css("opacity", 1 - $(window).scrollTop()/250); 
    });

https://jsfiddle.net/cyber007/6e6dbr6j/2/這個工作正常。在控制檯中，我想到一個小小的想法，即在即使去-值之後，看到不透明度值繼續運行。我不認爲值沒有必要降值之後更

來源

2016-01-24 pagol

什麼是你想淡出？無論圖像顯示在滑塊？什麼是你的JS代碼中的「元素」？ –

我只是更新我的問題。我想滑塊div將淡入像參考網站淡出。在滑塊div。不管內容是什麼。目前的演示我只是把bxslide。感謝您的回覆 – pagol

您的新提琴仍然沒有您的js代碼，就像您的問題一樣。請檢查並添加它，因爲它是在您的原始代碼中。 –

這裏是在0到夾不透明度的功能，但according to MDN：「在區間外的任何值[01]，雖然有效，被鉗範圍內最近的限制「，所以這不是必須的。

$(window).scroll(function(){ 
    var opacity = 1 - $(window).scrollTop()/250; 
    if (opacity < 0) opacity = 0; 
    $(".slider").css("opacity", opacity); 
});

UPDATE

任意開始和你的過渡的結束時，使用線性方程，就像這樣：

$(window).scroll(function(){ 
    var start = 200, end = 600; 
    var opacity = 1 - ($(window).scrollTop() - start)/(end - start); 
    if (opacity > 1) opacity = 1; 
    if (opacity < 0) opacity = 0; 
    $(".slider").css("opacity", opacity); 
    });

Here's a JSFiddle.

來源

2016-01-25 07:20:17 Rafi

感謝您的回答。我只是想如何設置滾動的起點。我的意思是不透明將開始當滾動位置200然後結束600 – pagol

更新答案設置起點 – Rafi

哇..冷靜的男人..非常感謝。 – pagol

在滾動div逐漸淡出淡出

回答

相關問題