在您滾動時更改圖像的「模糊」。

Question

我現在有一個開始模糊的橫幅圖像，然後當你向下滾動它時，它會變得非常棒。 You can view the example here

但是，一旦它達到900px左右，我希望它再次開始模糊。我不確定這樣做的最佳方式？

下面是我的HTML：

<div id="blurred-image-container"> 
    <div class="img-src" style="background-image:url('images/mainImage_blur.png')"></div> 
    <div class="img-src clean-image" style="background-image:url('images/mainImage.png');opacity:0"></div> 
</div> 

jQuery的

$(document).ready(function() { 
    $(window).scroll(function(e) { 
     var s = $(window).scrollTop(), 
      d = $(document).height(), 
      c = $(window).height(), 
      opacityVal = (s/600); 

     $('.clean-image').css('opacity', opacityVal); 
    }); 
}); 

謝謝！

Answer 1

這完全是一個數學問題。

最簡單，也是最有效的解決方法是使用Sinus曲線。

$(document).ready(function() { 
    $(window).scroll(function(e) { 
     var s = $(window).scrollTop(), 
      d = $(document).height(), 
      c = $(window).height(), 
      $clImg = $('.clean-image'); 

     var clImgTop = $clImg.offset().top; 
     var clImgBtm = $clImg.height() + cleanImageTop; 

     var opacityVal = getOpacityBy(clImgTop-100, clImgBtm+100, s+c/2, 0); 

     $clImg.css('opacity', opacityVal); 
    }); 
}); 

function getOpacityBy(start, end, current, opacityIfOutside){ 
    if(start > current || end < current) 
     return opacityIfOutside; 

    // Ratio is calculated to translate the pixels, 
    // to a value between 0 and 180 degrees 
    var ratio = (end-start)/180, 
     currentRelativePos = current-start; 

    // The sine function expects its input as radians 
    return Math.sin(toRadians(currentRelativePos/ratio)); 
} 

function toRadians (angle) { 
    return angle * (Math.PI/180); 
} 

這裏是JSFiddle它
OBS：請注意，原來的海報已經改變圖像的位置，這就是爲什麼小提琴現在無法正常工作。這一切
所有你真正做的是控制Length，Start和End點的正弦曲線