有没有办法在滚动时动态更改背景颜色?
例如,参考此网站(https://www.samsung.com/sec/smartphones/galaxy-note9/)。
当您首次访问该网站时,背景颜色是蓝色的。
向下滚动时,它会平稳地变成黑色。
还可以查看此网站(
第二个网站与第一个相同。但它的颜色一次性改变。
但第一个网站的颜色不会一次性改变。
它会根据滚动位置逐渐改变。
例如,参考此网站(https://www.samsung.com/sec/smartphones/galaxy-note9/)。
当您首次访问该网站时,背景颜色是蓝色的。
向下滚动时,它会平稳地变成黑色。
还可以查看此网站(
codepen.io/Funsella/pen/yLfAG/
)。第二个网站与第一个相同。但它的颜色一次性改变。
但第一个网站的颜色不会一次性改变。
它会根据滚动位置逐渐改变。
body {
height: 100vh;
}
.section1 {
background-color: white;
height: 100%;
}
.section2 {
background: linear-gradient(#f05fa6, #ed1654);
height: 100%;
}
<html>
<body>
<section class="section1">
SECTION1
</section>
<section class="section2">
SECTION2
</section>
</body>
</html>
上述代码是我正在处理的内容。
目前,它的颜色是由每个部分分开的。
当我向下滚动时,我想要更改颜色 background-color: white
-> background: linear-gradient(#f05fa6, #ed1654)
这方面有什么解决方案吗?
1
并除以150
? - Hide1 +
,那么颜色就不会从rgb(69, 111, 225)
开始,而是在页面顶部变成纯白色。如果你算一下,就会明白为什么了。150
只是我随意选择的一个常数,可以根据需要调整,以控制颜色过渡的速度。 - atomikssection1.style.webkitBackgroundColor
和section1.style.mozBackgroundColor
。但还是不行。我应该使用哪个属性? - Hidestyle.background
而不是style.backgroundColor
。 - atomiks