Question

有人可以帮助我实现从透明滚动到白色的变色效果，就像在此网站上显示的文字一样吗？http://antonandirene.com/

（在乞求它滚动透明它逐渐变白）

我试着写这个：

     $(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 650) {

                $("#branding h1").css('color', 'white');
            } else {

                $("#branding h1").css('color', 'transparent');
            }
        });
    });

但当然它并没有逐渐改变，任何人都知道如何实现这一目标？

感谢。

Answer 1

您需要添加css属性transition才能逐渐从一种颜色更改为另一种颜色。

Answer 2

试试这段代码它会帮助你

＆＃13;

var tStart = 100 // Start transition 100px from top
  , tEnd = 500   // End at 500px
  , cStart = [250, 195, 56]  // Gold
  , cEnd = [179, 217, 112]   // Lime
  , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];

$(document).ready(function(){
    $(document).scroll(function() {
        var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
        p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
        var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
        $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
    });
});

＆＃13;

body {
    height:2000px;
    background-color: rgb(250, 195, 56);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>Some text</body>

＆＃13;

Answer 3

您也可以尝试此代码

＆＃13;

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("body").css('background-color', 'white');
                } else {
                    $("body").css('background-color', 'transparent');
                }
            });
        });

＆＃13;

使用JS更改滚动的颜色效果

3 个答案: