RGBA颜色的渐变滚动？答案

【问题标题】：Gradient scroll with RGBA-color?RGBA颜色的渐变滚动？
【发布时间】：2023-03-10 08:36:01
【问题描述】：

我试图弄清楚如何使用“渐变滚动框”在滚动时将 RGBA 值发送到 DOM。我知道 RGBA 是 HTML5。但是为什么我不能在滚动时将新值作为 rgba 发送到我的标记中？我希望 alpha 始终为 0.5...有什么想法吗？

HTML

<body>
    <div>Fancy Gradient scroll</div>
</body>

CSS

body {
    background-color: rgba(57, 166, 221, 0.5);
    height: 5000px;
}
div {
    color: #fff;
    text-transform: uppercase;
    position: fixed;
    font-family: Arial, sans-serif;
    font-size: 40px;
    padding: 15px;
}

$(function gradientScrollBox() {
    var scroll_pos = 0;
    var animation_begin_pos = 0;
    var animation_end_pos = 5000;
    var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
    var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
    $(document).scroll(function () {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
            // Calculate rgb-value depending on start and end-color.
            var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
            var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
            var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
            var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
            var newColor = new $.Color(newRed, newGreen, newBlue);

            $("body").animate({ backgroundColor: newColor }, 0);
        } else if (scroll_pos > animation_end_pos) {
            $("body").animate({ backgroundColor: ending_color }, 0);
        } else if (scroll_pos < animation_begin_pos) {
            $("body").animate({ backgroundColor: beginning_color }, 0);
        }
    });
});

这是我的fiddle

正如您在我的小提琴中看到的，我在样式表中给出的颜色设置为 rgba(57, ... 0.5);但是一旦我开始滚动，值就会变为只有 rgb，并且 alpha 不再存在。任何帮助都会很好！

【问题讨论】：

标签： html scroll gradient rgba

【解决方案1】：

使用 jQuery，您可以在文档滚动时触发类更改，并根据 CSS 中的该类更改颜色，如下所示：

演示

    jQuery :

    $(document).ready(function () {
        $(window).scroll(function(){
            $('.sticky-nav').addClass('scrolled');
        });
    });

CSS :

.sticky-nav.scrolled{
    background: gold;
}

【讨论】：

对不起，我以为你在找那个

【解决方案2】：

通过添加具有 alpha 值的变量解决了我自己的问题。

$(function gradientScrollBox() {
    var scroll_pos = 0;
    var animation_begin_pos = 0;
    var animation_end_pos = 5000;
    var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
    var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
    $(document).scroll(function () {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
            // Calculate rgb-value depending on start and end-color.
            var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
            var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
            var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
            var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
            var newColor = new $.Color(newRed, newGreen, newBlue);

            $("body").animate({ backgroundColor: newColor }, 0);
        } else if (scroll_pos > animation_end_pos) {
            $("body").animate({ backgroundColor: ending_color }, 0);
        } else if (scroll_pos < animation_begin_pos) {
            $("body").animate({ backgroundColor: beginning_color }, 0);
        }
    });
});

通过这样做：var alpha = 0.5;

并把它放在这里var newColor = new $.Color(newRed, newGreen, newBlue, alpha);

【讨论】：