Question

我想将body元素的背景色链接到滚动位置，这样，当页面一直滚动到顶部时，它的颜色1，但是然后当它滚动超过screen.height时，它完全是不同的颜色，但是我希望对它进行插值，以使其在滚动一半时才过渡一半颜色。到目前为止，我已将其链接到

$(window).scrollTop() > screen.height

和

$(window).scrollTop() < screen.height

添加和删除一个更改背景颜色的类，但我希望它不仅依赖于滚动位置来触发事件，还希望平滑地为其设置动画，以便快速滚动过渡迅速，缓慢滚动过渡缓慢。

Answer 1

可能的解决方案之一是将rgb颜色绑定到当前高度，计算步数并根据当前滚动位置设置新的rgb颜色。在这里，我创建了最简单的情况-黑白过渡：

const step = 255 / $('#wrapper').height();
const multiplier = Math.round( 
  $('#wrapper').height() / 
  $('#wrapper').parent().height()
);

$('body').scroll(() => {
  const currentStyle = $('body').css('backgroundColor');
  const rgbValues = currentStyle.substring(
    currentStyle.lastIndexOf("(") + 1, 
    currentStyle.lastIndexOf(")")
  );
  const scrolled = $('body').scrollTop();
  const newValue = step * scrolled * multiplier;
  $('#wrapper').css('background-color', `rgb(${newValue}, ${newValue}, ${newValue})`);
});

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: rgb(0, 0, 0);
}

#wrapper {
  height: 200%;
  width: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section id="wrapper"></section>

这是从黄色到蓝色过渡的另一个示例：

const step = 255 / $('#wrapper').height();
const multiplier = Math.round( 
  $('#wrapper').height() / 
  $('#wrapper').parent().height()
);

$('body').scroll(() => {
  const currentStyle = $('body').css('backgroundColor');
  const rgbValues = currentStyle.substring(
    currentStyle.lastIndexOf("(") + 1, 
    currentStyle.lastIndexOf(")")
  );
  const scrolled = $('body').scrollTop();
  const newValue = step * scrolled * multiplier;
  $('#wrapper').css('background-color', `rgb(${255 - newValue}, ${255 - newValue}, ${newValue})`);
});

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: rgb(255, 255, 0);
}

#wrapper {
  height: 200%;
  width: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section id="wrapper"></section>

Answer 2

一种非常简单的方法来完成您想要的工作，只需使用渐变作为背景即可。

这里绝对不需要任何JS，这只会减慢页面速度。

body {
  height: 600vh;
  background: linear-gradient(#2E0854, #EE3B3B)
}

您是否有特定的理由要使用JS做到这一点？

Answer 3

var randomHex = function () {
  return (parseInt(Math.random()*16)).toString(16) || '0';
};
var randomColor = function () {
  return '#'+randomHex()+randomHex()+randomHex();
};
var randomGradient = function () {
  $('.longContent').css('background', 'linear-gradient(0.5turn, #222, '+randomColor()+','+randomColor()+')');
};
$(window).on('load', randomGradient);

body {
  margin: 0;
}
.longContent {
  height: 400vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

<div class="longContent"></div>

将背景色链接到滚动位置

3 个答案: