基于页面长度的模糊背景

Question

我正在尝试使如果向下滚动，出现模糊的图片（不透明度），并且如果您位于页面底部，则模糊的图片完全可见并且旧的一个消失了。我为每个页面使用相同的pagecontainer，并且我想让这个脚本在每个页面上都做这件事，用不同的页面长度。

我有这个至今：

CSS：

.img-src { 
    position: fixed; 
    background-position: center; 
    -webkit-background-size: cover; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: -1; 
} 

.blurred-img { 
    opacity: 0; 
} 

JS：

var divs = $('.social, .title'), 
limit = 0; 

$(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 
    if (st <= limit) { 
     $('.blurred-img').css({ 'opacity' : (1 - st/limit) }); 
    } 
}); 

Answer 1

filter: blur平时工作正常，看起来更好。这样的事情呢？

var img = document.getElementById("background-img"); 
 
var container = document.body; 
 
var maxBlur = 20; 
 

 
window.addEventListener("scroll", function(){ 
 
    var position = container.scrollTop/(container.scrollHeight - window.innerHeight); 
 
    // Adjust the position for safari that may scroll higher or lower than the 
 
    // actual size during their "bounce effect". 
 
    position = Math.max(0, Math.min(1, position)); 
 
    var blurAmount = position * maxBlur; 
 
    img.style["filter"] = "blur(" + blurAmount + "px)"; 
 
});

#background-img { 
 
    position: fixed; 
 
} 
 
#spacer { 
 
    width: 50px; 
 
    height: 2000px; 
 
}

<img id="background-img" src="http://placehold.it/400x200?text=Background" /> 
 
<div id="spacer"></div>

如果你真的想这样做你的两个图像的策略，这里是我会怎么做。

var img = document.getElementById("blured-background-img"); 
 
var container = document.body; 
 

 
window.addEventListener("scroll", function(){ 
 
    var opacity = container.scrollTop/(container.scrollHeight - window.innerHeight); 
 
    // Adjust the opacity for safari that may scroll higher or lower than the 
 
    // actual size during their "bounce effect". 
 
    opacity = Math.max(0, Math.min(1, opacity)); 
 
    img.style["opacity"] = opacity; 
 
});

#background-img { 
 
    position: fixed; 
 
} 
 
#blured-background-img { 
 
    position: fixed; 
 
    opacity: 0; 
 
} 
 
#spacer { 
 
    width: 50px; 
 
    height: 2000px; 
 
}

<img id="background-img" src="http://placehold.it/400x200/7A6DFF/D3CFFF?text=Bottom" /> 
 
<img id="blured-background-img" src="http://placehold.it/400x200?text=Top" /> 
 
<div id="spacer"></div>