如何在滚动上创建简单的淡入淡出效果

俗话说：“一张图抵千言”，那么我们来看看我们要创建什么（向下滚动查看效果）：

See the Pen A Simple Fade Effect on Scroll by Envato Tuts+ (@tutsplus) on CodePen.

1. 从页面标记开始

与上一个教程类似，我们将定义一个带有标题和全屏div包装的部分。包装器将包含两个空 div的 s。两个元素都有一个背景图像。最后一个元素将接收front类。

这是标记：

...

<section>
  <h1>...</h1>
  <div class="img-wrapper">
    <div style="background-image: url(cinque-terre-back.jpg);"></div>
    <div class="front" style="background-image: url(cinque-terre-front.jpg);"></div>
  </div>
</section>

...

2. 添加css

如前所述，包装元素将覆盖整个视口高度。此外，它的孩子将被堆叠在一起。默认情况下，将出现最后一个元素。

样式如下：

/*CUSTOM VARIABLES HERE*/

img-wrapper {
  display: grid;
  height: 100vh;
}

.img-wrapper div {
  grid-column: 1;
  grid-row: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray);
  transition: opacity 0.1s;
}

3. 滚动动画

当我们开始向下滚动时，.front元素会逐渐淡出，它的兄弟元素会出现。相反，当我们开始向上滚动时，.front元素将逐渐淡入并因此位于其兄弟元素之上。

为此，我们将首先在checkpoint 变量中存储一个数字（根据您的需要更改它），该数字将确定元素应该在多少像素后 .front 消失。然后，我们将监听该scroll事件并在其回调中执行以下操作：

跟踪用户垂直滚动了多少。
如果它们的滚动量小于目标数量，则.front元素将根据滚动方向逐渐变为隐藏或可见。否则，为了安全起见，我们将其不透明度设置为0.

以下是相关的 javascript 代码：

const checkpoint = 300;

window.addeventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= checkpoint) {
    opacity = 1 - currentScroll / checkpoint;
  } else {
    opacity = 0;
  }
  document.queryselector(".front").style.opacity = opacity;
});