web-slinger.css：像wow.js一样，但是带有CSS-y滚动动画

>本文探讨了滚动动画，专门针对“滚动触发”，这是一种技术，一旦用户滚动就可以激活特定点，则动画会激活。 虽然目前缺乏本机CSS支持，但我们可以使用巧妙的CSS技术来实现此效果，从而创建一个仅使用CSS的JavaScript库，例如WOW.JS。 这种方法利用animation-timeline属性，自定义属性和样式查询。

>

>现有的滚动动画解决方案在向上滚动时通常会反向动画，这与WOW.J.中所需的“一对”行为不同。 此限制启发了创建“ web-slinger.css”，一个纯CSS库模仿wow.js功能。

> web-slinger.css：仅CSS仅滚动动画库

>

> web-slinger.css使用.scroll-trigger-n>和.on-scroll-trigger-n的类，以及自定义属性（--scroll-trigger-n）来管理动画。 这种方法将动画从动画元素中触发，提供灵活性。

一个简单的示例使用

>触发来自Animate.css的“ Flipiny”动画。 更复杂的示例，例如演示中的“ cownter”，演示了从单个滚动点触发多个动画。.scroll-trigger-8

cowner的标记很简单：

<div>
  <h2></h2>
  <div>
    <br><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">? Play again</a>
  </div>
</div>

及其CSS利用样式查询动态内容更新：>

演示将web-slinger.css用作外部资源。

.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';
    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }

  a {
    text-decoration: none;
    color: blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}

> web-slinger.css实现详细信息

核心概念涉及使用

作为动画时间表来创建永久固定元素。 然后，样式查询和自定义属性基于此固定元素的可见性控制其他动画。

>该技术避免了直接对用户可见的元素进行动画动画，而是将固定元素作为触发器。 命名查看进度时间表（

）将固定元素链接到要动画的元素。 view()

>查看CSS代码timeline-scope

>限制和未来改进

/** Each trigger element toggles `--scroll-trigger-n` from 0 to 1, unpausing animations on `.on-scroll-trigger-n` **/
:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to { --scroll-trigger-1: 1; }
}

/** Animate elements only when `.scroll-trigger-1` is in view **/
.on-scroll-trigger-1 { animation-play-state: paused; }
@container style(--scroll-trigger-1: 1) { .on-scroll-trigger-1 { animation-play-state: running; } }

/** Trigger element, fixed to top, activating animations **/
.scroll-trigger-1 { view-timeline-name: --trigger-timeline-1; }</integer>

> Web-slinger.css虽然功能性，但会生成带有更多触发器的较大的CSS文件。 编号的班级名称缺乏语义清晰度。 理想情况下，本机浏览器支持将允许使用ID链接触发器和目标，类似于假设的属性。

卷轴触发的动画的未来在于本机浏览器支持。 可以采用类似于web-slinger.css的声明性方法进行标准化。

以上是web-slinger.css：像wow.js一样，但是带有CSS-y滚动动画的详细内容。更多信息请关注PHP中文网其他相关文章！