vue实现滚动条淡入淡出_快速提示：如何在滚动条上创建简单的淡入淡出效果

vue实现滚动条淡入淡出

在今天的超级快速教程中，我们将学习如何构建简单但有用的滚动效果。 当我们在页面中滚动时，两个元素的可见性将根据滚动位置而变化。

俗话说：“一张图片值得一千个单词”，让我们来看看我们将要创建的内容（向下滚动以查看效果）：

1.从页面标记开始

与上一教程类似，我们将定义一个带有标题和全屏div包装器的部分。 包装器将包含两个空div 。 这两个元素都将具有背景图像。 最后一个元素将获得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;
});

您已经完成了简单的滚动淡入淡出效果！

做完了！ 仅用几行代码，我们就可以创建一个有趣的滚动效果，您可以尝试使用，尤其是在页面的英雄部分。

希望您喜欢这个小练习，并为在即将到来的项目中构建类似内容而获得灵感。 作为一个快速的主意，您可以将此演示与上一教程中的演示结合起来，而不必使用两个不同的图像，并显示彩色图像。

与往常一样，非常感谢您的阅读！

更多滚动教程

翻译自: https://webdesign.tutsplus.com/tutorials/simple-fade-effect-on-scroll--cms-35166

vue实现滚动条淡入淡出