web-slinger.css：跨越swiper-verse-css教程-PHP中文网

web-slinger.css：跨越swiper-verse

William Shakespeare

发布： 2025-03-07 16:48:19

原创

512 人浏览过

Web-Slinger.css: Across the Swiper-Verse

我以前的帖子

强调了水平滑动在Tinder上的不可逆转后果。我将在另一个时候深入研究这种挫败感，但乍一看，Swipe Navigation对于web-slinger.css来说似乎是完美的 - 我的实验性，纯CSS替代了WOW.JS的单向滚动触发动画。（仍在创作主题曲！）

> web-slinger.css可以使用仅使用CSS来喜欢/不喜欢元素的Tinder风格的滑动互动吗？更重要的是，根据大众需求，这是否可以使用蜘蛛侠图像来证明是合理的吗？介绍蜘蛛猪刷子 - 我提出的验证码更换（因为谁不喜欢蜘蛛杆？）。向左或向右滑动（目前仅在Chrome/Edge下方）注册您的意见。> 扩展地平线

显然，

改变了Web-Slinger对

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

登录后复制

类的元素的默认行为，使滚动触发器对水平而不是垂直，滚动反应。否则，尽管由于容器宽度而在视觉上隐藏了触发器，因为它们在我们的刀刀上的垂直折叠上方。

>我的初始步骤涉及分叉尼古拉·塔拉诺夫（Nikolay Talanov）出色的JavaScript Tinder Swipe演示，删除JavaScript，除了一张卡外，然后将其导入Web-slinger.css并应用水平补丁。卡容器变成了scroll-trigger-n，并带有三个并排的视口大小的卷轴缝制框。中间幻灯片使用的

，在中心启动用户并允许向后/向前滚动。

position: fixed>注意：scroll-align: center>具有非常规滚动驱动的动画，可滚动元素无需滚动任何可见的内容。就像复选框hacks一样 - 隐藏复选框，样式标签。我们利用可滚动元素的CSS行为，而不是其默认UI。第三个幻灯片上的

div激活了拒绝动画： >它起作用了！（叙述者：不是，真的。

添加此会导致页面加载中自动“喜欢”的蜘蛛杆。非常适合普遍崇拜的人（AHEM，中年CSS黑客）。但是，蜘蛛杆并不是普遍的爱，所以让我们研究为什么右翼的行为与预期的不同，尽管看似相同。 scroll-trigger-1后退

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

登录后复制

此错误突出显示了

的限制。 Web-Slinger依赖于仅适用于仅由

向后

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

登录后复制

滚动触发的动画的技术。

>可视化器表明，无论animation-range>如何，动画都在元素朝滚动方向离开视口之后完成 -

的相反。幸运的是，Bramus（Chrome Dev Team）有一个用于检测CSS滚动方向的演示。使用他巧妙的

自定义属性，我们可以通过样式查询来控制--scroll-direction元素的外观：scroll-trigger-2

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

登录后复制

这可确保仅在上一个幻灯片上出现，并通过向后滚动到达。

（由三秒钟的三步动画控制）计算当前幻灯片，需要果断的滑动以触发不喜欢的幻灯片。 .scroll-trigger-2最终滑动--slide-index

跟踪蜘蛛杆的意见，我使用第三方计数器图像作为背景：

>经验教训

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

登录后复制

>这比预期的要复杂，这主要是由于使用仅在向后滚动下运行的滚动触发动画的挑战。这是宝贵的知识。当前规格中隐藏的功率令人惊讶。我们可以根据非常具体的滚动行为进行样式。但是，我们不得不攻击API才能访问此功能。理想的解决方案将是：

使用这样的API，蜘蛛猪sw刀不需要黑客。

>我希望对卷轴驱动的动画进行更广泛的浏览器支持，并具有更灵活的规格，以鼓励设计师为他们的经验构建非线性讲故事。如果没有，一旦动画时间表得到了更广泛的支持，则可能是时候使web-slinger.css更加健壮和准备就绪。

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

登录后复制

以上是web-slinger.css：跨越swiper-verse的详细内容。更多信息请关注PHP中文网其他相关文章！