Question

有人可以告诉我这段代码的帮助吗？

基本上我有2个相同的图像，一个是在白天拍摄的，另一个是在夜间拍摄的，我希望它在光源的位置是原始图像，并且当页面向下滚动时，它开始融入较暗的图像。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BG Test</title>

    <script>
    var start = 100 // how far the user has to scroll down before it start fading
    var end = 1200 // the number of pixels the user has to scroll down before the opacity is 0.

    $(document).scroll(function(){
        if(scrollTop>start){
            $('images/MainLight.png').css({'body':(end-scrollTop)/(end-start)});
        }
    });
    </script>
    </head>

    <style type="text/css">
    body{
        background:url(images/MainLight.png) no-repeat center center fixed;
        opacity:100;
        width:100%;
        z-index:-1;

    }

    bgimg{
        background:url(images/MainDark.png) no-repeat center center fixed;
        opacity:100;
        width:100%;
        z-index:0;
    }

    </style>

    <div class="body" >

       Top!
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br                                 /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />        <br /><br /><br /><br /><br /><br /><br /><br />
       Middle!
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />        <br /><br /><br /><br /><br /><br /><br /><br />
               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br         /><br /><br /><br /><br /><br /><br /><br /><br /><br />
       Bottom!

    </div>

    <body>
    </body>
    </html>

非常感谢提前。

Answer 1

尝试小提琴中的某些内容：http://jsfiddle.net/z7E9u/1/

我正在复制小提琴js：

var fadeStart = 100 // 100px滚动或更小将等于1不透明度，fadeUntil = 200 // 200px滚动或更多将等于0不透明度，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

问题在于不透明度从1变为0.只需将您的CSS更改为以下内容：

body{
    background:url(images/MainLight.png) no-repeat center center fixed;
    opacity:1;
    width:100%;
    z-index:-1;

}

bgimg{
    background:url(images/MainDark.png) no-repeat center center fixed;
    opacity:1;
    width:100%;
    z-index:0;
}

Answer 3

好的，我使用了-webkit-mask。试试这个 FIddle

.child-2 {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.45, #000), color-stop(0.55, transparent));
    -webkit-mask-size:220%;
    -webkit-mask-position-y:0%;
}

var child2 = $('.child-2'),
    lastScrollTop = 0;
$(window).scroll(function (event) {
    var st = $(this).scrollTop(),
        pos = parseInt(child2.css("-webkit-mask-position-y").replace('%', ''));
    if (st > lastScrollTop) {
        pos += 3;
    } else {
        pos -= 3;
    }
    lastScrollTop = st;
    if (!(pos<0) || !(pos>100)) {
        child2.css("-webkit-mask-position-y", pos + "%");
    }
});//Rest of the code is in the fiddle.

它仍然是马车，但它只是一个粗略的想法。

使用HTML / CSS / JavaScript控制图像不透明度

3 个答案: