如何用JAVASCRIPT更新背景位置值来实现CSS视差滚动

发布于12月14日

在使用JavaScript的CSS中，如何将不同的Y位置百分比分配给layered background images，以便它们随着页面滚动而更新？

<style>
  body {
    background-image: 
      url(img/bg-pattern-01.png),
      url(img/bg-pattern-02.png),
      url(img/bg-pattern-03.png);
    background-position:
      center 45%,
      center 50%,
      center 55%;
  }
</style>

因此，在上面的示例中，百分比(45%、50%、55%)不是静态值，而是受页面垂直滚动位置的动态影响.可能是实际滚动百分比的混合或平均混合.

推荐答案

我在下面添加了示例代码.

-Java -Java 脚本

document.addEventListener("scroll", () => {
  document.body.style.backgroundPosition = [0, 30, 60]
    .map(
      (basePosition) => `center ${basePosition + window.scrollY * 0.2}%`
    )
    .join(", ");
});

-css.-css.

    body {
      margin: 0;
      height: 200vh; /* Ensure enough content to allow scrolling */
      background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1),
        url(https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1),
        url(https://images.pexels.com/photos/743986/pexels-photo-743986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
      background-position: center 0%, center 30%, center 60%;
      background-repeat: no-repeat;
    }