Paralax 渐变 + 转换 css-解网

问：

您能告诉我如何在滚动时根据背景渐变使文本颜色发生变化，并在滚动时增加颜色吗？

现在，渐变或缩放都可以使用。

增加了清晰度，并展示了两个以这种方式或那种方式工作的代码示例。

$(window).scroll(function() {
  var mass = Math.min(20, 1 + 0.005 * $(this).scrollTop());
  $('div').css('transform', 'scale(' + mass + ')');
});

body {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  font-size: 100px;
  text-align: center;
  font-weight: 600;
  background: linear-gradient(to top, blue 20%, red 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span>TEST</span></div>

body {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  font-size: 100px;
  text-align: center;
  font-weight: 600;
  background: linear-gradient(to top, blue 20%, red 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div><span>TEST</span></div>

JavaScript HTML CSS

Paralax 渐变 + 转换 css

Paralax gradient + transform css

评论