SuperAPI AI 工具集

m-scroll-fx

前端与建站

查看项目

更新于 10-16 06:56

技能介绍

用途

m-scroll-fx 用于给网页添加滚动触发的视觉动效,主要包含两类效果:元素进入视口时的显现(reveal),以及背景层的视差(parallax)移动。

主要能力

显现(Reveal)

  • 元素在进入视口时淡入,并向上位移 20-30px。
  • 触发阈值(threshold)为 0.1。
  • 同级元素之间以 80-120ms 的间隔错开出现(stagger)。
  • 一次性播放(one-shot),即元素显现后不再重新隐藏。

视差(Parallax)

  • 背景层以不同的滚动速率移动。
  • 在支持的环境下使用 CSS 滚动驱动动画(scroll-driven animations)。
  • 效果保持轻微,速率差控制在 0.1-0.3。

无障碍

  • 尊重 prefers-reduced-motion 用户偏好。

使用方式

资料中未提供具体安装命令、代码示例或调用步骤,暂未提供。

适用场景

适用于需要在页面滚动过程中加入淡入上移显现效果与轻微背景视差的网页场景。

限制

  • 视差效果依赖 CSS 滚动驱动动画的支持情况,仅在支持的环境下使用该方式。
  • 具体实现细节、依赖与兼容范围暂未提供。