Question

有什么方法可以动态地滚动更改背景颜色吗？

例如，请访问此网站（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)

对此有什么解决办法吗？

谢谢。

Answer 1

您需要通过考虑页面的滚动偏移量（window.scrollY或旧浏览器中的window.pageYOffset）来平滑地插值颜色。

三星站点正在过渡纯色而不是渐变，这有点简单。

喜欢（see 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})`
})

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

Answer 2

我认为您需要使用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’)
   } 
});
});

Answer 3

此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;
}

Answer 4

我试图使用带有自定义最终颜色的原子解决方案，但这太困难了。通过使用chroma.js

，我发现自己是一个更好的解决方案

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

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

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

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

底部的最后一种颜色

动态更改滚动的背景颜色

4 个答案: