文章/答案/技术大牛

发布

社区首页 >问答首页 >使用css和js使背景梯度(径向)在滚动体上移动。

问使用css和js使背景梯度(径向)在滚动体上移动。
EN

Stack Overflow用户

提问于 2021-07-02 18:21:34

回答 1查看 330关注 0票数 0

所以，我正在寻找的是一个微妙的径向梯度背景效应，它将从左向右移动，当页面被滚动，就像这个网站- https://hellonesh.io/。所以当我检查那个网站的代码时，我发现了负责的HTML和CSS -

<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实现这种效果？谢谢!

radial-gradients

javascript

jquery

css

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-03 05:38:10

这个问题有两个部分:如何感知另一个部分何时进入视图和如何移动背景图像取决于现在查看的是哪个部分。

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

对于第二个片段，这个片段使用一个CSS变量--x来表示背景图像的径向梯度在哪里有它的'at‘x coord集。我不知道每个部分想要什么值，所以这个片段只查看视图中的部分的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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68229772

复制

相似问题

问使用css和js使背景梯度(径向)在滚动体上移动。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css和js使背景梯度(径向)在滚动体上移动。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css和js使背景梯度(径向)在滚动体上移动。
EN