LayerJS: 基于 HTML 的 Web UI/UX 交互式动画框架
LayerJS 是一款开源 JavaScript UI/UX 库，致力于为 Web 应用和网站提供直观、视觉冲击力强且类似移动应用的用户体验。LayerJS 将诸如菜单、滑块、弹出层、灯箱、视差滚动、页面滑动以及缩放等 UX 交互模式抽象为交互式动画层级。
LayerJS 引入了基于 HTML 的 Stage-Frame 概念来构建上述模式。其中，Frame 作为内容容器，可以承载子页面、屏幕、菜单面板、灯箱、卡片、幻灯片等内容；而 Stage 则定义了 Frame 内容动态适配的视窗。例如，根 Stage 通常代表浏览器窗口，其 Frame 则代表子页面或应用程序屏幕。
Frame 之间的切换可以通过滑动、淡入淡出等动画过渡实现。此外，Stage 和 Frame 支持嵌套，例如在一个代表应用程序屏幕的 Frame 中，可以嵌套一个包含多张幻灯片的 Stage。
LayerJS 的理念与材料设计原则相契合，其中 Frame 类似于材料设计中的纸张或表面，而 Stage 则定义了表面布局和主要运动。借助 Stage，用户界面动画过渡可以简单地定义为下一步应该在哪个 Stage 上显示哪个 Frame。 这些转换通过简单的 HTML 链接触发，链接中包含了目标 Stage 和 Frame 的信息。
文件大小：11MB
评论区