触发方式

在阅读区滚轮、拖动或用 PageDown 滚动,文字经过上下遮罩时逐渐模糊。模糊强度使用像素,区域高度控制遮罩范围;位置可选顶部、底部或上下,阅读内容、段数与行高独立保存。目录悬停、聚焦和手机 Preview 共用演示,标题进入编辑器。

参数与内容

阅读文字: [长内容见控件,1273 characters];滚动提示: "Scroll down to see the effect";段落数量: 10;阅读字号: 16;行高倍数: 1.5;模糊强度: 4;模糊区域高度: 150;模糊位置: "both";背景色: "#f5f4f3";文字颜色: "#939292"

起点与终点

初始画面使用以上保存内容。逻辑画布 540 × 600,整体缩放 1,位置偏移 (0, 0)。

时序

模糊为静态 CSS 遮罩,实际滚动决定文字露出;演示延迟 0 ms。通用时长字段不改变模糊效果。

进入与退出

文字滚经上下渐进模糊遮罩,阅读区中部保持清晰。 演示停止后保留组件的当前交互状态。

重复操作与打断

离开目录且失焦、滚出可视区和切换后台会停止演示。实际输入、当前选择与播放进度不覆盖保存的默认值。

参数与导出

控件、预览、JSON、Motion 适配器、复刻工程和 HTML 导出共用同一设置对象与渲染器。目录卡片始终显示项目默认预设。

减少动态效果

不自动演示,过渡直接呈现目标状态;保留真实输入、按钮、选择和键盘操作。

默认配置

这些数值来自当前维护的默认配置;编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "skiper-41",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "skiper": {
    "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat cumque laudantium libero reprehenderit perferendis quo nulla voluptate? Repellat tenetur labore exercitationem dicta libero voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic iste libero dignissimos ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam at debitis delectus odit quia animi ex mollitia vero molestias itaque deleniti, quos exercitationem consequatur assumenda dolor? Quod reiciendis in similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere aliquam voluptatum alias? Officia expedita ut vel? Beatae deserunt sequi id eos libero suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est laborum quam sint eius sequi. Eum, veniam dignissimos.",
    "paragraphs": 10,
    "fontSize": 16,
    "lineHeight": 1.5,
    "blurAmount": 4,
    "blurHeight": 150,
    "position": "both",
    "backgroundColor": "#f5f4f3",
    "textColor": "#939292",
    "hint": "Scroll down to see the effect"
  }
}

参考来源与复用

此效果参考 Skiper UI;可用的公开源码已经核对,Pro 项目依据公开演示独立实现。可在编辑器导出当前配置与可运行渲染器,复用时保留 Skiper UI 署名及素材来源。

用于自己的项目

进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。

目录来源标注:Skiper UI. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。