Question

我有一个带背景图片的div。当用户滚动页面时，会向图像添加不透明度，以便显示第二个图像。如果向第二个图像添加一些样式，效果非常好。我在http://mattduvall.com/blog/medium-ux-blurry-scroll/

上找到了以下脚本

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

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

然而，图像仅在滚动150px后发生变化，这迫使我仅在顶部定位的图像上包含此效果。如果在页面中间插入图像（> 150px），则仅显示第二张图像并且效果丢失。

我不是jQuery专家所以我想知道当图像开始“退出”屏幕而不依赖于滚动的像素时，我是否可以包含一个变量来添加此效果。

我想要的是实现相同的效果，但像素滚动。我的意思是，如果图像位于页面顶部，效果将显示为与底部相同。

编辑：将“模糊图像”类更改为与小提琴相同。小提琴创建：http://jsfiddle.net/q6Qhm/

Answer 1

这样的事情会是你想要的吗？我不完全确定你要求的是什么。

$(window).scroll(function(e) {
    var s = $(window).scrollTop(),
        opacityVal = (s / $('.blurred-image').height());

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

Answer 2

这是我很久以前的代码.. 它的一部分会改变图像的不透明度，直到它消失。我真的很想帮助你，但我没有太多时间来编辑我的代码，因此我只是将代码部分与其他一些不太相关的东西粘贴在一起。使用相关部件。

我希望它能帮到你

window.onscroll = function (){
var scroll = window.pageYOffset || document.documentElement.scrollTop;
    var image = document.getElementById('main_graph');
    var imageTop = document.getElementById('main_graph_top');
    var topButton = document.getElementById('top');
    var images_container = document.getElementById('images_container');
    if(scroll <= 1){
        opacity = 1;
        image.style.visibility = "visible";
        imageTop.style.visibility = "visible";
        images_container.style.zIndex=1001;
    }
    else if(scroll>1 && scroll <=212){
        opacity = 1 - (scroll / 212);
        image.style.visibility = "visible";
        imageTop.style.visibility = "visible";
    }
    else{
        var opacity = 0;
        image.style.visibility = "hidden";
        imageTop.style.visibility = "hidden";
        images_container.style.zIndex=900;
    }
    inverseOpacity = 1 - opacity;
    image.style.opacity = opacity;
    imageTop.style.opacity = opacity;
    topButton.style.opacity = inverseOpacity;
}

淡出未知滚动高度的背景图像

2 个答案: