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

Question

所以我一直在寻找一种微妙的径向渐变背景效果，当页面滚动时，它会从左向右移动，就像这个网站 - 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 来达到这种效果？谢谢！

Answer 1

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

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

对于第二个，此代码段使用 CSS 变量 --x 表示背景图像径向渐变的 'at' x 坐标集。我不知道每个部分需要什么值，所以此代码段仅查看视图中部分的 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>

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

Make the background gradient(radial) move on scroll using css and js

javascript

css

jquery

radial-gradients

css-animations