揭示文本 HTML、CSS、JS 的滚动选项

Question

我想在我的 HTML 代码中获得类似https://www.stpeterscollege.lk/history-of-our-college的效果。 有人可以帮我吗？

Answer 1

有一个名为 scroll-out 的微型库，可以帮助进行滚动检测，并且可以让您轻松获得这种效果。 这是它的链接。

您只需要添加以下 CSS

[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

这在 HTML 中对所有元素应用滚动效果。

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script>
  ScrollOut();
</script>

按照文档获取更多信息。