文章标签

网站上的一点动画可以增添一些趣味，给用户留下深刻印象，并吸引他们的注意力。您可以让它们在页面加载时立即运行，无论它们在页面上的哪个位置。但如果您的…

当需求写着“当可见时”时，你的大脑应该直接想到 IntersectionObserver。这正是 Zach 正在做的事情，在这里当它滚动到视图中时开始动画。

除了这个动画是一个 SVG SMIL 动画：一个 <animate>…

如果您在一个长滚动页面上有一个目录，这要归功于，比如，position: fixed; 或 position: sticky;，JavaScript 中的 IntersectionObserver API 是突出显示目录中项目（当相应的页面内容…）的完美伴侣。

让我们看一下 CSS @keyframes 动画，特别是关于如何暂停以及控制它们的方法。有一个专门用于此的 CSS 属性，可以用 JavaScript 控制，但是要获得…有很多细微之处。

目录是链接列表，允许您快速跳转到同一页面上的特定内容部分。它有利于长篇内容，因为它向用户展示了内容的方便概述…

完全同意 David 的观点，CSS 需要一个选择器来知道一个 position: sticky; 元素是否正在执行其粘性操作。

理想情况下，会有一个 :stuck CSS 指令我们可以使用，但我们可以做的最好的就是

假设您有一个两列布局：一列是主要内容，另一列是侧边栏。假设它有很多内容，并且包含需要滚动的部分。侧边栏很大程度上是空的，因此您可以安全地放置一个…

已经有几篇很棒的文章探讨了如何使用这个 API，包括来自作者的选择，比如 Phil Hawksworth、Preethi 和 Mateusz Rybczonek，仅举几例。但我的目标是做一些…

您可能不知道，但是 JavaScript 在最近一段时间内秘密积累了许多观察者，而 Intersection Observer 就是其中的一部分。观察者是实时发现某些事物的对象——比如去…的观鸟者。