Question

上的滚动效果

注意滚动底部时如何覆盖顶部部分，因为它会消失。目前我的代码很简单。布局在各部分之间分开。

<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

部分之间的视差滚动

1 个答案: