滚动动画

在 CSS 中，无需任何 JavaScript 就可以实现一些滚动动画。只需查看关于 滚动指示器 的章节，这显然是 CSS 的魔力。但我们可以在 CSS 中直接完成大量滚动动画工作，只需要 JavaScript 提供的一点点信息：页面滚动多远。

所以让我们先解决这个问题。使用 JavaScript 的单行代码，我们可以设置一个 CSS 自定义属性，它知道页面滚动的百分比

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

现在我们有了 --scroll 作为可以在 CSS 中使用的值。

这个技巧来自 Scott Kellum，他是一位非常厉害的 CSS 技巧大师！

让我们先不使用该值来设置动画。这是一个简单的 SVG 元素旋转动画，它会 永远旋转

svg {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
你懂的，它会旋转，永远旋转。

重点来了！ 现在让我们暂停这个动画。我们不会在一段时间内对其进行动画，而是通过页面滚动调整 animation-delay 来通过滚动位置对其进行动画。如果 animation-duration 为 1s，这意味着滚动页面的整个长度。是动画的一次迭代。

svg {
  position: fixed; /* make sure it stays put so we can see it! */

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

尝试将 animation-duration 更改为 0.5s。这样就可以在页面向下滚动时使用 animation-delay 数学运算完成两个完整的动画循环。

Scott 在他的原始演示中指出，还设置了…

animation-iteration-count: 1;
animation-fill-mode: both;

… 考虑了一些“过冲”的奇怪现象，我可以证明我也见过，尤其是在短视窗上，所以设置它们也是值得的。

Scott 还将与滚动相关的动画属性设置为 :root {} 本身，这意味着它可以同时控制页面上的所有动画。 这是他的演示，它同时控制三个动画

© 2024 . All rights reserved.