javascript - 部分之间的视差滚动

Question

我正在尝试模拟 http://theoneandonlyboutique.com/ 上的滚动效果

请注意，当您滚动时，底部部分如何随着顶部部分的淡出而覆盖在顶部部分上。目前我的代码很简单。布局在各个部分之间分开。

<section class="red">Section 1</section>
<section class="green">Section 2</section>
<section class="orange">Section 3</section>

和CSS:

section {
  width: 100%;
  min-height: 400px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.orange {
  background-color: orange;
}

https://jsfiddle.net/kfhnj8ep/

这是我在 stackoverflow 上找到的最接近的 Simple parallax, CSS Layers, reveal last section when scrolling

任何提示/帮助都会很棒!认为这有助于用户专注于手头的内容。

Answer 1

您需要的是在您将在滚动时使用 javascript 移动的部分中的一个部分中有一张图像或任何您想要设置动画的内容。

像这样:

var cover = document.querySelector('.js-parallax'),
  coverHeight = Math.round(cover.offsetHeight),
  translate = 0,
  parallaxThreshold = 3; // parallax speed

function parallax() {
  if (window.scrollY < coverHeight) {
    translate = Math.round(window.scrollY / parallaxThreshold);
    cover.style.transform = 'translateY(' + translate + 'px)';
  }
}

window.requestAnimationFrame(parallax);

window.addEventListener('scroll', function () {
  window.requestAnimationFrame(parallax);
}, false);

我在这里制作了一个演示，您可以在其中查看完整代码:http://codepen.io/vincentorback/pen/MYYrmj