Hid*_*ide 7 javascript css dom-events
有没有办法在滚动时动态更改背景颜色？
例如，参考这个网站（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)
有什么解决办法吗？
ato*_*iks 13
您需要通过考虑页面的滚动偏移（window.scrollY，或window.pageYOffset在较旧的浏览器上）来平滑地插入颜色。
三星网站正在过渡纯色而不是渐变，这更简单一些。
像这样（见 CodePen）：
const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')
window.addEventListener('scroll', () => {
let y = 1 + (window.scrollY || window.pageYOffset) / 150
y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})
您可以将相同的逻辑应用于渐变颜色。
| 归档时间： |
|
| 查看次数： |
30618 次 |
| 最近记录： |