通过CSS滚动时间表滑过无限尺寸

CSS最初的设计理念，其创建者曾设想它将成为网页行为控制的主要技术，而脚本语言仅作为CSS无法声明式实现功能时的备选方案。这种优先使用CSS的方法论基于“脚本是编程，编程很难”的理念。自引入：hover伪类以来，CSS一直在标准化开发人员在JavaScript中创建的模式，并将其“收录”到CSS标准中。从这个角度来看，JavaScript几乎像是“变通方法”，而CSS才是官方途径。

因此，使用CSS实现类似脚本的行为会让我们感觉不那么“别扭”，而像新的scroll-timeline特性这样拥有良好浏览器支持的功能出现也就不足为奇了。许多开发者实现了巧妙的视差滚动网站，这使得我们无法将这个CSS功能“精灵”再放回瓶子里。如果您不希望在下一个视差滚动网站中出现卡顿的主线程动画，那么您现在必须转向CSS黑客的“黑暗面”。（开个玩笑），如果您更喜欢命令式编程，也存在一个新的JavaScript API用于滚动关联动画。

将JavaScript示例迁移到CSS

将Chris Coyier的scroll-timeline之前的视差滚动动画示例进行修改，用一行CSS代码替换Chris用来控制动画的CSS，并完全删除JavaScript代码，这令人满意地简单。

body, .progress, .cube {
  animation-timeline: scroll();
}

不带参数使用scroll()函数会设置一个“匿名滚动进度时间线”，这意味着如果我们的书写模式是英文，浏览器将基于最近的可以垂直滚动的祖先元素来进行动画。不幸的是，我们似乎只能选择基于特定元素的x轴或y轴上的滚动来进行动画，而不能同时基于两者，这将非常有用。作为一个函数，我们可以向scroll()传递参数，这可以更好地控制我们希望滚动如何运行动画。

多维度实验

更好的是scroll-scope属性。将其应用于容器元素意味着我们可以基于任何具有相同已分配作用域的可滚动元素，对任何选定的祖先元素上的属性进行动画。这让我开始思考……由于CSS Houdini允许我们在CSS中注册动画友好的、可继承的属性，我们可以基于页面上的多个可滚动区域组合同一个元素上的动画。这为有趣的教学设计可能性打开了大门，例如我下面的实验。

滚动浅绿色卡片上的水平叙述会水平旋转3D NES游戏机，滚动深绿色卡片上的垂直叙述会垂直旋转NES游戏机。在我之前的文章中，我提到我过去的CSS技巧总是归结为使用CSS隐藏和显示有限的可能性。我对这个基于滚动的实验感兴趣的地方在于组合的垂直和水平旋转的组合爆炸。动画时间线提供了过去不可能实现的纯CSS交互性。

实现细节不如timeline-scope的使用和自定义属性重要。我们注册两个自定义角度属性：

body, .progress, .cube {
  animation-timeline: scroll();
}

然后，我们从Julian Garner令人惊叹的CSS 3D建模应用程序中的示例中“借用”NES 3D模型。我们更新.scene类，使3D旋转基于我们的新变量，如下所示：

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

接下来，我们为body元素提供一个带有两个自定义命名作用域的scroll-scope。

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

我没有看到任何关于传入多个作用域的官方文档，但它确实在Google Chrome和Edge中有效。如果它不是正式支持的特性，我希望它能成为标准的一部分，因为它非常方便。

接下来，我们为两个可滚动卡片和我们想要触发动画的轴定义命名时间线。

body {
  scroll-scope: --myScroller,--myScroller2; 
}

并将动画添加到场景中：

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

由于3D模型继承了文档正文的x和y角度，因此滚动卡片现在会以垂直和水平角度变化的组合旋转模型。

超越滚动条的用户控制动画

仔细想想，这种行为不仅仅对滚动驱动的动画有用。在上面的实验中，我们更多地将可滚动区域用作控制3D模型属性的滑块。在完成工作后，我出去散步，并幻想如果实际的范围输入可以控制动画时间线会多么酷。然后我发现它们可以！至少在Chrome中可以。纯CSS CMS？

在我们从Julian Garner那里征用3D模型的同时，让我们看看是否可以使用范围输入来控制他的X翼模型。

令人难以置信的是，我们只需使用CSS就能实现这一点，而且我们可以用任意数量的属性来实现。对我来说，这还不够。我希望看到其他可以操纵动画时间线的输入控件。想象一下，文本字段在您填写时推进动画，或者按钮能够播放或反转动画。后者可以通过将:active伪类与animation-play-state属性结合起来在某种程度上实现。但是根据我的经验，当您尝试使用它来动画多个自定义属性时，浏览器可能会感到困惑。相比之下，动画时间线在设计时就考虑到了这个用例，因此运行流畅，完全符合我的预期。

注意到这个新兴CSS特性的潜力的人并不只有我一个。有人已经通过结合scroll-timeline和复选框技巧实现了这个巧妙的Doom克隆。我的问题是它仍然不够。我们在Chrome中拥有足够的资源来使用滚动条和范围输入作为游戏控件来实现化身构建器。我很高兴尝试在scroll-timeline特性出现之前的时代中前所未有的不可预测、复杂的体验。毕竟，如果你必须向外星人解释电子游戏的定义，难道你不会说它只是一个超交互式动画吗？

以上是通过CSS滚动时间表滑过无限尺寸的详细内容。更多信息请关注PHP中文网其他相关文章！