Hallmark N10 浮动导航配方深拆交叉淡入淡出的 4 条铁律【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款面向 Claude Code、Cursor 和 Codex 的反 AI 味Anti-AI-slop设计技能它把看起来像人工打磨而非机器生成的规则固化成一套可执行的配方。其中最有挑战性的组件就是N10 · Floating-on-scroll morph 浮动导航页面顶部的通栏导航条在用户滚动超过阈值后变形为悬浮胶囊pill——同一份 DOM、两种视觉状态、一次类名切换、一条时间曲线靠交叉淡入淡出cross-fade实现丝滑过渡。本文将完整拆解这套配方背后的 4 条铁律带你避开 90% 新手会踩的坑。N10 是什么一条 DOM两种面孔N10 的结构只有一层header套一个内层包裹header classnav div classnav__inner a classwordmarkHallmark/a ul classnav__links…/ul /div /header分工非常清晰外层.nav负责默认通栏的长相背景、底边线、背景模糊内层.nav__inner负责悬浮胶囊的长相圆角、毛玻璃、阴影、位移滚动超过阈值后只需给导航切上.is-floating一个类两层视觉各自淡出、淡入用户看到的就是导航条化身为胶囊。别和 N5 搞混N5 Floating pill 是常驻胶囊没有滚动行为N10 N5 一个默认通栏状态并 morph 进胶囊。适用场景是 atmospheric / modern-minimal 这类页面——一个克制的动态微时刻就足够了。4 条铁律一条都不能破完整配方写在 floating-nav.md组件索引在 n10-floating-on-scroll-morph.md。以下是铁律原文的通俗解读铁律 1 · 导航总高度永远不变外层一旦变矮下方所有像素都会垂直位移——用户会直观地感知为页面跳了一下。正确做法内层收缩多少就用外层的padding-block补回多少让两种状态下的总高度数学上相等。这是本模式里伤害最大、也最容易犯的错误。铁律 2 · 视觉位移只用 transform禁用 padding / margin胶囊要和视口顶部留出呼吸空间。新手最爱给外层加padding-top——直接违反铁律 1页面瞬间抖动。正确做法给内层加transform: translateY(12px)。transform 不参与布局计算胶囊视觉上落下来了盒子本身纹丝不动下方内容照常滚动。铁律 3 · 每一个共享视觉属性都要交叉交接外层在默认态拥有的每个属性背景、边框、backdrop-filter、阴影在.is-floating状态下都要显式中和并且写进 transition 列表。漏掉任何一条都会出怪事——比如外层残留一个backdrop-filter: blur(14px)你就会看到一条看不见的模糊色带横着穿过视口背后什么都没有。⚠️ 小技巧用blur(0)而不是none。none无法过渡会啪地跳变blur(0)可以平滑过渡。铁律 4 · 所有属性共用一条时间曲线8 个属性各用 8 条曲线 8 段动画读起来像坏了8 个属性共用一条曲线 一个动作。配方指定cubic-bezier(0.16, 1, 0.3, 1)指数缓出 约 520ms。把精力花在打磨曲线、阴影层次、高度守恒的数学上而不是加更多花活。属性形态表10 个属性一条曲线元素属性默认态通栏浮动态胶囊.navpadding-block0var(--space-2xs).navbackground-color深色 / 0.62透明.navbackdrop-filtersaturate(1.4) blur(14px)blur(0).nav__innerborder-radius0999pxpill.nav__innermin-height60px52px.nav__innerbackground-color透明深色 / 0.82.nav__innerbackdrop-filterblur(0)blur(18px).nav__innerbox-shadow无落影 色调辉光 内描边.nav__innertransformtranslateY(0)translateY(12px)注意高度守恒的数学内层60px → 52px少了 8px外层padding-block恰好补 8px——这就是铁律 1 的落地方式。滚动处理器3 个性能纪律点仓库里 BananaStudio 示例 给出了可直接抄的实现index.html 脚本段、styles.css 样式段核心逻辑只有 3 个纪律点{ passive: true }—— 监听器不preventDefault浏览器把主线程留给滚动本身requestAnimationFrame节流—— 事件回调封顶 60 次/秒和绘制帧对齐布尔翻转守卫—— 只在状态真正翻转时classList.toggle一次而不是每个 scroll 事件都 toggle杜绝布局抖动layout thrash。另外滚动阈值用 80px至少 60px避免动一下鼠标导航就变的神经质闪烁。8 个反模式Hallmark 直接拒绝的写法#反模式为什么不行1用两个header靠 opacity 切换DOM 翻倍、焦点顺序打架、内容可能失步2用top/margin-top做悬浮偏移触发布局重排只有 transform 是正确的杠杆3浮动态用backdrop-filter: none无法过渡会硬跳4两种状态间导航高度变化内容抖动本模式最伤的错误5每个属性不同 transition 时长看起来都在动但就是坏了6scroll 事件不加passive/ 不 rAF 节流移动端滚动性能双杀7阈值设为 0轻微一滚就变形太跳8漏掉布尔翻转守卫每个滚动事件都切类名布局抖动延伸阅读 完整配方四条铁律 属性表 脚本 八个反模式floating-nav.md 组件索引条目components/n10-floating-on-scroll-morph.md 组件总书36 个组件原型速查component-cookbook.md 可运行的参考实现site/examples/bananastudio/ 项目总入口SKILL.md一句话总结N10 的精髓不在多而在克制的编排——一份 DOM、一条曲线、高度守恒。把这四样做对你的导航就会看起来像手工调出来的而不是 AI 默认吐出来的。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark N10 浮动导航配方深拆：交叉淡入淡出的 4 条铁律
Hallmark N10 浮动导航配方深拆交叉淡入淡出的 4 条铁律【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款面向 Claude Code、Cursor 和 Codex 的反 AI 味Anti-AI-slop设计技能它把看起来像人工打磨而非机器生成的规则固化成一套可执行的配方。其中最有挑战性的组件就是N10 · Floating-on-scroll morph 浮动导航页面顶部的通栏导航条在用户滚动超过阈值后变形为悬浮胶囊pill——同一份 DOM、两种视觉状态、一次类名切换、一条时间曲线靠交叉淡入淡出cross-fade实现丝滑过渡。本文将完整拆解这套配方背后的 4 条铁律带你避开 90% 新手会踩的坑。N10 是什么一条 DOM两种面孔N10 的结构只有一层header套一个内层包裹header classnav div classnav__inner a classwordmarkHallmark/a ul classnav__links…/ul /div /header分工非常清晰外层.nav负责默认通栏的长相背景、底边线、背景模糊内层.nav__inner负责悬浮胶囊的长相圆角、毛玻璃、阴影、位移滚动超过阈值后只需给导航切上.is-floating一个类两层视觉各自淡出、淡入用户看到的就是导航条化身为胶囊。别和 N5 搞混N5 Floating pill 是常驻胶囊没有滚动行为N10 N5 一个默认通栏状态并 morph 进胶囊。适用场景是 atmospheric / modern-minimal 这类页面——一个克制的动态微时刻就足够了。4 条铁律一条都不能破完整配方写在 floating-nav.md组件索引在 n10-floating-on-scroll-morph.md。以下是铁律原文的通俗解读铁律 1 · 导航总高度永远不变外层一旦变矮下方所有像素都会垂直位移——用户会直观地感知为页面跳了一下。正确做法内层收缩多少就用外层的padding-block补回多少让两种状态下的总高度数学上相等。这是本模式里伤害最大、也最容易犯的错误。铁律 2 · 视觉位移只用 transform禁用 padding / margin胶囊要和视口顶部留出呼吸空间。新手最爱给外层加padding-top——直接违反铁律 1页面瞬间抖动。正确做法给内层加transform: translateY(12px)。transform 不参与布局计算胶囊视觉上落下来了盒子本身纹丝不动下方内容照常滚动。铁律 3 · 每一个共享视觉属性都要交叉交接外层在默认态拥有的每个属性背景、边框、backdrop-filter、阴影在.is-floating状态下都要显式中和并且写进 transition 列表。漏掉任何一条都会出怪事——比如外层残留一个backdrop-filter: blur(14px)你就会看到一条看不见的模糊色带横着穿过视口背后什么都没有。⚠️ 小技巧用blur(0)而不是none。none无法过渡会啪地跳变blur(0)可以平滑过渡。铁律 4 · 所有属性共用一条时间曲线8 个属性各用 8 条曲线 8 段动画读起来像坏了8 个属性共用一条曲线 一个动作。配方指定cubic-bezier(0.16, 1, 0.3, 1)指数缓出 约 520ms。把精力花在打磨曲线、阴影层次、高度守恒的数学上而不是加更多花活。属性形态表10 个属性一条曲线元素属性默认态通栏浮动态胶囊.navpadding-block0var(--space-2xs).navbackground-color深色 / 0.62透明.navbackdrop-filtersaturate(1.4) blur(14px)blur(0).nav__innerborder-radius0999pxpill.nav__innermin-height60px52px.nav__innerbackground-color透明深色 / 0.82.nav__innerbackdrop-filterblur(0)blur(18px).nav__innerbox-shadow无落影 色调辉光 内描边.nav__innertransformtranslateY(0)translateY(12px)注意高度守恒的数学内层60px → 52px少了 8px外层padding-block恰好补 8px——这就是铁律 1 的落地方式。滚动处理器3 个性能纪律点仓库里 BananaStudio 示例 给出了可直接抄的实现index.html 脚本段、styles.css 样式段核心逻辑只有 3 个纪律点{ passive: true }—— 监听器不preventDefault浏览器把主线程留给滚动本身requestAnimationFrame节流—— 事件回调封顶 60 次/秒和绘制帧对齐布尔翻转守卫—— 只在状态真正翻转时classList.toggle一次而不是每个 scroll 事件都 toggle杜绝布局抖动layout thrash。另外滚动阈值用 80px至少 60px避免动一下鼠标导航就变的神经质闪烁。8 个反模式Hallmark 直接拒绝的写法#反模式为什么不行1用两个header靠 opacity 切换DOM 翻倍、焦点顺序打架、内容可能失步2用top/margin-top做悬浮偏移触发布局重排只有 transform 是正确的杠杆3浮动态用backdrop-filter: none无法过渡会硬跳4两种状态间导航高度变化内容抖动本模式最伤的错误5每个属性不同 transition 时长看起来都在动但就是坏了6scroll 事件不加passive/ 不 rAF 节流移动端滚动性能双杀7阈值设为 0轻微一滚就变形太跳8漏掉布尔翻转守卫每个滚动事件都切类名布局抖动延伸阅读 完整配方四条铁律 属性表 脚本 八个反模式floating-nav.md 组件索引条目components/n10-floating-on-scroll-morph.md 组件总书36 个组件原型速查component-cookbook.md 可运行的参考实现site/examples/bananastudio/ 项目总入口SKILL.md一句话总结N10 的精髓不在多而在克制的编排——一份 DOM、一条曲线、高度守恒。把这四样做对你的导航就会看起来像手工调出来的而不是 AI 默认吐出来的。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考