使用 css 和 js 使背景渐变（径向）在滚动上移动答案

【问题标题】：Make the background gradient(radial) move on scroll using css and js使用 css 和 js 使背景渐变（径向）在滚动上移动
【发布时间】：2021-07-02 18:21:34
【问题描述】：

所以我正在寻找的是一种微妙的径向渐变背景效果，当页面滚动时它会从左向右移动，就像这个网站 - https://hellonesh.io/ 一样。因此，当我检查该站点的代码时，我发现了负责该效果的 HTML 和 CSS -

HTML

<body>
<main>

  <div class="bg" style="background-image: radial-gradient(88.33% 60.62% at 100.87% 48.33%, rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);"></div>

  <section id="sec-1">
    ...
  </section>
  <section id="sec-2">
    ...
  </section>
  <section id="sec-3">
    ...
  </section>

</main>

<script>

  //  Need help here

</script>
</body>

CSS

.bg {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

section {
    height: 100vh;
}

jQuery/js

$(window).on('scroll', function () {
    //When a new section(100Vh) comes into view move the radial gradient left to right or right to left
    // completely lost here
    // $('.bg').css({background-image: "radial-gradient()"});
});

但我不知道如何在滚动时使径向渐变在视口中移动。如果是插件，请告诉我名称。如果没有，那么我怎样才能使用 JavaScript 或 jQuery 实现这种效果？谢谢！

【问题讨论】：

在什么条件下你想改变免费的位置？在您指向它的站点中，单击一个元素（左侧“列表”）即可完成，但您谈论的是滚动，在这种情况下，您需要为滚动事件添加一个事件侦听器。如果您仍然卡住，请尝试一些代码并将其添加到您的问题中。
谢谢@AHaworth！所以你就在我提到的网站上，当我单击左侧部分指示器时，当我滚动并且部分更改时，效果就会发生。我希望复制这种确切的效果。我仍然被困住了。希望今天能学到新东西！
您能否准确描述什么条件会导致背景被移动 - 现在似乎需要在特定部分进入视野时移动它 - 这是另一回事，你可以调查 intersectionObserver 来做到这一点。如果这是导致所需更改的条件，请告诉我。
对不起@AHaworth，如果我的描述不清楚。这就是我正在寻找的 - “每当我滚动到一个新部分（即 100Vh）时，径向渐变应该像那个站点一样从左到右然后从右到左平滑地移动”。这里的“新部分”部分会很好但不是必需的。我希望这次我已经消除了困惑。
你好@AHaworth 我也更新了html。我希望现在很清楚:)

标签： javascript jquery css css-animations radial-gradients

【解决方案1】：

这个问题有两个部分：如何感知另一个部分何时进入视图以及何时感知如何根据当前视图中的哪个部分移动背景图像。

首先我们可以使用 InterSectionObserver。如果我们将观察者附加到每个部分，它将在该部分进入（或离开，但我们对此不感兴趣）视口时被触发。

第二个，这个 sn-p 使用一个 CSS 变量 --x 来说明背景图像径向渐变在哪里设置它的 'at' x 坐标。我不知道每个部分你想要什么值，所以这个 sn-p 只是查看视图中的部分的 id 并计算仅为演示的偏移量。

function callback(entries) {
  entries.forEach( entry => {
    if (entry.isIntersecting) {
      let x = 50 * Number(entry.target.id.replace('sec-', '') - 1); //change to whatever you want the x to be for sec-n
      bg.style.setProperty('--x', x + '%');
    }
  });
}

const bg = document.querySelector('.bg');
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(callback);

sections.forEach( section => {
  observer.observe(section);  
});

.bg { 
    --x: 0;
    --y: 48.33%;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(88.33% 60.62% at var(--x) var(--y), rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);
}

section {
    height: 100vh;
}

<main>

  <div class="bg"></div>

  <section id="sec-1">
    ...
  </section>
  <section id="sec-2">
    ...
  </section>
  <section id="sec-3">
    ...
  </section>

</main>

【讨论】：