Question

在我的Web应用程序中，我具有由2个线性渐变组成的背景我想基于滚动更改渐变的“倾斜度”

我真的不知道该怎么做...

这是当前状态：https://prnt.sc/no3las （所以我想为滚动上的蓝色背景稀薄设置动画：-)）

这是我网站背景的CSS

html {
  font-family: 'Roboto Mono', monospace;
  background: linear-gradient(70deg, #5870cb 20%, rgba(0, 0, 0, 0) 1%), 
              linear-gradient(20deg, white 85%, #5870cb 2%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

Answer 1

要旋转渐变，您需要了解（并解构）linear-gradient（实际上是background-image）。可以在MDN上找到一个不错的摘要，并且在CSSWG（W3C）上可以看到官方规格。

要了解的第一件事是您不能移动它的中心。由于它是元素的背景，因此渐变的中心将始终是元素的中心。
注意：如果您的设计需要不同的旋转中心，则始终可以使用多个元素，并相应地调整大小。

现在，假设您要将第一个渐变从70deg旋转到110deg，将第二个渐变从20deg旋转到155deg。

快速搜索scroll event将（希望）使您进入MDN's page，其中有一个例子。

将其与上面的代码结合使用，您将获得如下收益（我将旋转backgroundImage的逻辑放在示例的doSomething函数中）。

我还指定了我从哪儿学习的每一步，以展示如何逐步记录您的问题。这里要指出的是：您可以做的每一件事，做到这一点，只剩下您不知道的部分。

let last_known_scroll_position = 0;
let ticking = false;

// helpers
const body = document.querySelector('body');
const html = document.querySelector('html');

function doSomething(scroll_pos) {

 // from https://stackoverflow.com/a/1147768/1891677 :
 const bodyHeight = Math.max( body.scrollHeight, 
                              body.offsetHeight, 
                              html.clientHeight, 
                              html.scrollHeight, 
                              html.offsetHeight);
 
 // from https://stackoverflow.com/a/8876069/1891677 :
 const viewportHeight = Math.max(document.documentElement.clientHeight,
                                 window.innerHeight || 0);
 
 // set scrollPercentage, if we have available scroll (0 otherwise):
 const availableScroll = bodyHeight - viewportHeight;
 const percentage = availableScroll > 0 ? scroll_pos * 100/availableScroll : 0;
  
 // this is what the question is about:
 const fromPercent = (from,to,current) => ((to - from) * current/100) + from;
 body.style.backgroundImage = `
 linear-gradient(${fromPercent(70, 110, percentage)}deg, #5870cb 20%, rgba(0,0,0,0) 0),
 linear-gradient(${fromPercent(20, 155, percentage)}deg, white 85%, #5870cb 2%)
 `;
}

// rest of example, from MDN:
window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

body {
  font-family: 'Roboto Mono', monospace;
  background-image: linear-gradient(70deg, #5870cb 20%, rgba(0,0,0,0) 1%), 
                    linear-gradient(20deg, white 85%, #5870cb 2%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 300vh;
}

Answer 2

基本上，您需要的是当前滚动位置（通过.scrollTop）和最大滚动距离（<SCROLLING_ELEMENT>.scrollHeight - window.innerHeight）。如果您有这些信息，则可以使用一些JS轻松地计算渐变的旋转/角度：

// HTML :: Element
const HTML = document.documentElement;

// getCurrentScroll :: () -> Number
const getCurrentScroll = () => HTML.scrollTop;

// getMaxScroll :: () -> Number
const getMaxScroll = () => HTML.scrollHeight - window.innerHeight;

// calcRotation :: (Number, Number) -> Number
const calcRotation = (pos, max) => pos / max * 360;

// getBG :: Number -> String
const getBG = r => `linear-gradient(${r + 70}deg, #5870cb 20%, rgba(0,0,0,0) 1%), linear-gradient(${r + 20}deg, white 85%, #5870cb 2%)`;



document.addEventListener('scroll', () => {
  const rot = calcRotation(getCurrentScroll(), getMaxScroll());
  HTML.style.backgroundImage = getBG(rot);
});

html {
  font-family: 'Roboto Mono', monospace;
  background: linear-gradient(70deg, #5870cb 20%, rgba(0, 0, 0, 0) 1%), 
  linear-gradient(20deg, white 85%, #5870cb 2%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  overflow: auto; /* no scrolling without this line */
}

body { height: 200vh; } /* just to create a scroll bar */

更改滚动条上的背景线性渐变度

2 个答案: