Question

我之前在Codepen和小型实验项目上已经达到了视差背景效果。

这是我最喜欢的教程-https://keithclark.co.uk/articles/pure-css-parallax-websites/

这是参考教程中的标记：

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

重要的CSS位：

.parallax {
  ...
  perspective: 1px;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}

基本上-.parallax元素具有透视图，从本质上讲，它可以在3d空间中查看事物。

.parallax__layer--base（是前景层）位于z轴上的0处。因此它并没有脱离其起源。

.parallax__layer--back（背景层）位于z轴的后方一个像素。

现在，当您滚动浏览.parallax元素时，可以看到这些背景和前景图层在3d空间中移动，从而产生了视差效果。

但是，如果您正在滚动.parallax元素，则它仅有效-在完整，稳定的页面上呢？

<div class='home'>
...
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back">
      ...
    </div>
    <div class="parallax__layer parallax__layer--base">
      ...
    </div>
  </div>
  ...
</div>

css和标记未更改。但是现在，我正在滚动.home元素，而不是.parallax元素。前景层和背景层仍处于3d空间中，但仅相对于.perspective元素。

是否有办法以某种方式将这种观点传递给孙子孙女或曾孙子孙？还是我需要将整个页面分为前台和后台两部分才能达到这种效果？

Answer 1

我想出了一种使用JavaScript实现此目的的“ hacky”方法。

以下是步骤的摘要（您可以将其称为算法）：

收听窗口滚动事件
等到视差容器（您定义为base和back的父容器）出现在视图中
在我的情况下，我固定了back并在过渡期间更改了top的{{1}}值。

这是我的实现（特定于我的用例）：

base

/**
 * hacky parallax effect
 */
const viewportHeight =
  'innerHeight' in window
    ? window.innerHeight
    : document.documentElement.offsetHeight

const headerHeight = document.querySelector('header').offsetHeight

window.onscroll = () => {
  const preFooterPosition = document
    .querySelector('.pre-footer')
    .getBoundingClientRect()

  /** start parallax when pre-footer is in view */
  if (
    preFooterPosition.top <= headerHeight &&
    preFooterPosition.bottom >= viewportHeight
  ) {
    // parallax
    document.querySelector('.content').classList.add('transform-content')
  } else {
    // reverse parallax
    document
      .querySelector('.content')
      .classList.remove('transform-content')
  }
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 1;
  position: relative;
  top: 0;
  transition: top 1s ease;
}

.transform-content {
  top: -5rem;
}

.watermark {
  position: absolute;
  z-index: 0;
  flex: 1;
  display: flex;
}

我希望能有所帮助。当您提出更好的解决方案时，请告诉我。同时，我正在推动这一点。

干杯！

如何与孙辈实现视差效果

1 个答案: