网页
落地页与网站里值得反复看的交互细节
落地页与网站里值得反复看的交互细节
Scroll Story
一个真的可以滚动的迷你落地页：标题逐行从基线揭开，图片随滚动从圆角小框展开到满幅，数字在吸顶区块里一路数上去，右侧细线记录阅读进度。
scrollTop 推导：scroll 事件只打一个标记，真正的计算放进 rAF，一帧最多算一次。clip-path: inset(12% round 22px) 线性收到 inset(0 round 0)，内层同时 scale(1.08 → 1)，裁切与缩放反向抵消，画面像是被推到眼前，而不是被放大。position: sticky 钉住 160px 的滚动距离，计数比钉住稍早开始、在释放时刚好数完，三个数字之间再错开 0.14 的进度。clip-path 从下往上揭开并带 0.34em 上浮，110ms 错峰；滚动时首屏以 0.32× 的速度视差下沉并淡出，把注意力交给下一屏。Text Scramble Hero
深色落地页首屏：标题逐字从一串等宽符号里"解码"出来，从左到右错峰落定；指针扫过哪个词，哪个词就重新洗一遍牌。
::after 叠在上面绘制，所以解码全程零重排，邻居字母一像素都不会被挤动。26ms 错峰再加 0–60ms 随机抖动，每个字符各自乱跳 240–560ms，波前不是一把尺子，更像信号在逐步锁定。#c7f94f，落定时用 200ms 颜色过渡从透明浮现，“机器噪声 → 显示字体”的反差就是这个效果的记忆点。dt 累加而不是读系统时间，卡片滚出视口暂停后再回来，解码会从停下的那一帧接着走。Spotlight Feature Grid
落地页的特性区块，指针像一盏提着走的灯：所在卡片的 1px 描边和内部被照亮，相邻卡片朝向指针的那条边也跟着发光。
--x/--y（相对自身左上角）绘制同一个光圈，六张卡片始终同时更新：光落在谁身上谁就亮，被光圈边缘扫到的邻居也会亮起一截边框。padding: 1px 的径向渐变，用 mask-composite: exclude 挖空内容区，只剩 1px 的环；内部再叠一层 0.11 透明度的柔光，玻璃感来自这两层的落差。55ms 时间常数指数跟随指针，而不是贴死在指针上——读起来像手里提着灯，而不是一张贴纸。300ms 淡入，离开区域后 600ms 在原地慢慢熄灭；再次进入时光从指针当前的位置亮起，不会从上次离开的地方滑过来。Logo Marquee
「受到这些团队信赖」区块：两行虚构品牌字标反向无限滚动，边缘渐隐；指针停在哪一行，那一行就慢慢刹到 0.2 倍速，被指着的标志恢复品牌色。
@keyframes（内容复制两份，translateX(0 → -50%)），跑在合成线程上，离屏时也能被站点统一暂停；只在变速时通过 WAAPI 的 getAnimations() 拿到它，改 playbackRate。200ms 时间常数向 0.2× 逼近，离开后同样平滑回到 1×——像把手按在传送带上，而不是拔掉电源。#a3a3a3 灰阶，悬停时文字变深、符号恢复品牌色。mask-image 线性渐变淡出，标志是“流进来”的而不是被裁掉的；开启减少动态效果时整条带子静止。最近收录
没有找到相关的交互，换个关键词试试。