11

有没有办法在滚动时动态更改背景颜色？

例如，参考这个网站（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)

有什么解决办法吗？

4

4 回答 4

16

您需要通过考虑页面的滚动偏移量（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})`
})

您可以将相同的逻辑应用于渐变颜色。

于 2018-10-04T02:54:46.507 回答
3

我认为您需要使用 CSS 的“过渡”属性。

body {
  background: green;
  transition: 0.3s all;
}

然后您可以添加、删除元素以及更改颜色：

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } 
   if ($(this).scrollTop() < 50) {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});
于 2018-10-04T01:52:08.947 回答
2

我尝试使用具有自定义最终颜色的 atomiks 解决方案，但这太难了。通过使用chroma.js，我发现自己是一个更好的解决方案

您需要使用两种颜色（或更多）生成比例：

var scale = chroma.scale(['#1abc9c', '#e74c3c']).domain([0, $(document).height()]);
$(window).on('scroll', function () {
    $('.section').css('background-color', scale(window.pageYOffset));
});

在这里，我用我想要的颜色创建了一个比例，然后我添加了一个自定义域，以便我的比例可以使用可以从 0（页面顶部）到 3600（页面底部）的偏移位置。或者，您可以尝试通过一些数学运算获得介于 0 和 1 之间的滚动位置值。

然后，当我们滚动时，我们可以将我们的比例与当前滚动位置一起使用。在到达页面底部的最后一个颜色之前，它将在我们的两种颜色之间生成一个 RGBA 颜色#e74c3c

于 2019-06-07T08:28:35.597 回答
1

此 jquery 代码更改正文的背景颜色。

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

不要忘记添加过渡 css 以获得您在示例中看到的效果。

body {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

使您的部分类的背景透明。

.section1, section2 {
  background-color: transparent;
}
于 2018-10-04T02:48:19.067 回答