@enigmax/ 原始内容
无头互动原始:行为,时机和可取性,没有自己的风格.
马克以像素每秒的速度取出,从不持续. 环行的一圈和它的内容一样长,所以持续的时间可以使速度 content / duration 而每增加一个项目,该行运行得更快. 从奇长阵列分出两行,相同 --duration: 20s,测量了53.2 px/s和66.5 px/s,并意在看起来像一对. 固定50年代的提供铁路在10个、15个和20个物品上测得45个、67个和87个px/s,因为没有人在增加一个提供商时编辑时间。 取出一个速度并得出持续时间:同一条铁路随后在所有三个计数中测出67.0px/s.
安装
npm install @enigmax/primitives
# or, to copy the source in and own it:
enigma add marquee --copy
用这个
反应 :
import { useMarquee } from "@enigmax/primitives/react";
function LogoWall({ logos }) {
const { laneRef, trackRef, copies, dragging } = useMarquee({ speed: 80, hoverScale: 0.15 });
return (
<div ref={laneRef} style={{ cursor: dragging ? "grabbing" : "grab" }}>
<div ref={trackRef} style={{ display: "flex" }}>
{Array.from({ length: copies }, (_, copy) => (
<div key={copy} aria-hidden={copy > 0} style={{ display: "flex", gap: 32 }}>
{logos.map(logo => <a key={logo.id} href={logo.href}>{logo.name}</a>)}
</div>
))}
</div>
</div>
);
}
香草, Astro, 或其他任何能给你两个元素的东西:
import { createMarquee } from "@enigmax/primitives";
const marquee = createMarquee(document.querySelector("[data-lane]"), document.querySelector("[data-track]"), {
speed: 80,
hoverScale: 0.15
});
核心克隆了赛道上第一个灌道的孩子. 在反应中,钩子报告 copies 倒数取而代之,因此React保留了DOM的所有权.
选项
| 选项 | 默认 | 含义 |
|---|---|---|
speed | 60 | 以像素为每秒. 没有时间. |
reverse | false | 向起起入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入. |
vertical | false | 在Y轴上滚动. |
draggable | true | 抓住并抛出行. |
hoverScale | 1 | 速度乘以 a 鼠标 卧倒在一行. 0 暂停. |
decay | 0.12 | 一秒后剩下的速度差距的分数. 0.35 有点拖累. |
manageStyles | true | 应用行为需要的样式。 永远不要主题风格. |
为何明显执行错误
其中3个每只要一个生产错误。 这些是这一一揽子方案存在的原因,而不是片段.
setPointerCapture 默然地打破了行中的每一个链接. 一个指针捕获重瞄准兼容鼠标事件,所以 click 平面媒体在车道上而不是按住的卡片上到达,卡片的链接从不打开. 一条九条道的旋转木马悄悄地停止了九条链路 而源头里什么也没有看错 此套件绑定 pointermove 编号 : pointerup 编号 : pointercancel 改为 window,这是所有抓取的 - 鼠标下拉已经在 OS 级别上抓取了鼠标,所以浏览器窗口外的放出仍然到达.
touch-action 决定手机能否滚动页面. 没有它,浏览器就拥有了水平的刷子,拖曳处理器从不看到. 与 none,访问者无法再通过开始行上手势来滚动页面,这在手机上是屏幕宽度的大部分. 车道得到 pan-y (或 pan-x 当垂直时.
忽略的悬浮效应 pointerType 永远保持接触. 水龙头大火 pointerenter 也一样,在触摸上... ... ..... pointerleave 所以在第一次水龙头之后,"在徘徊上慢下来" 就会以15%的速度永远离开排位 这里每条徘徊道都是被锁住的 pointerType === "mouse" - 光是这个门是不够的,需要CI故障:铬跟随 兼容性 索赔的指针事件 pointerType: "mouse"它在Linux上而不是在Windows上发出它们,所以天真之门通过一台机器而失败在另一台机器上. 因此,一触也抑制了徘徊一秒钟 pointerleave 清除状态, 不论指针类型如何, 因为无法消除的悬浮是错误 .
简而言之,其余的:圈由两个拷贝之间的台阶来测量,而不是由项目宽度来计算;转换由一个驱动 requestAnimationFrame 循环而不是 CSS 键框,它在每个重写者上重新启动; 一个整数器携带了巡航,徘徊和动力,所以没有人能作为切入而来; 拖过~6px在捕获相中取消了点击; 右键从不开始拖动; 指针在放出前仍被拖出~90ms; 在拖动时会减少自動放出, 因为拖动是对指针的回答,而不是页面自己主动的动作.
样式
原始船只没有视觉风格 它只规定行为需要什么overflow, (中文(简体) ), touch-action, (中文(简体) ), user-select, (中文(简体) ), will-change, (中文(简体) ), transform)并曝光状态作为主题要钩入的数据属性:
[data-enigma-marquee] { cursor: grab; }
[data-enigma-marquee][data-dragging] { cursor: grabbing; }
[data-enigma-marquee][data-hovering] { --logo-opacity: 1; }
[data-enigma-marquee][data-reduced-motion="true"] { /* autoplay is off */ }
[data-enigma-marquee-track] { display: flex; }
[data-enigma-marquee-copy] { display: flex; gap: 2rem; }
测试
套房驱动真实的浏览器和样本 new DOMMatrixReadOnly(getComputedStyle(track).transform).m41 而不是问引擎它相信什么.
npm run test:install # once, fetches Chromium
npm test
| 检查 | 通行条件 |
|---|---|
| 2,9,11,20项的速度相同 | 测量的px/s在1%以内 |
| 沿着指针拖曳 | 200px 刷新移动行 200.0px |
| 释放 | 单调地在巡航上衰变, 没有显示翻转 |
| 4个视图调整大小 | 帧不移动多于一帧 |
| 在链接上拖动结束 | 0个导航 |
| 完全点击并点击链接 | 每架1个导航 |
| 触动 | 排行不坚持徘徊速度 |
| 电话垂直刷卡 | 页面仍然滚动 |
prefers-reduced-motion | 0.00px 闲放漂移,拖放还行 |
| 别动,然后释放 | 不飞 |
两种欺骗自己的方法, 这两种方法都产生了虚假的警报 当它被写: 不要测量大小 改变像之前/之后,因为 setViewportSize 需要几百毫秒 在此期间,行 合法地继续移动 - 抽样每个帧 寻找一个异常的一。 并丢弃前几个样本,因为安装了取样器后的第一个RAF三角洲接近于零并产生无意义的px/s突起.