TremulaJS 介绍
Tremulajs 是一款非常酷的跨设备多 功能 的无限循环 js 轮播图 插件 。Tremulajs 是 一个 客户端 JavaScript UI 组件,它基于贝兹曲线和物理动量效应制作各种 效果 ,可以制作无限循环的 图片 流, 图片 瀑布流,旋转木马特效等。Tremulajs 适用于桌面和移动触摸设备。 ?
Tremulajs 由 5 个部分组成:滚动轴(Scroll Axis)、动量循环(Momentum Loop)、 内容 网格(Content Grid)、 内容 模型(Content Box )和网格投影(Grid Projection)。
滚动轴
Tremulajs 可以制作各种视觉 效果 ,但是它可以在两个方向上滚动,这些值封装在 Scroll Axis 对象中,该对象用于管理水平和垂直方向上的滚动。
动量循环
动量循环(momentum loop)用于调节系统的动量值。它是各种子组件 输出 的总和, 包括 : 一个 内部时钟的动量,各种条件控制 功能 与滚动轴状态和 用户 交互事件处理程序。在每 一个 动画帧它都会返回 一个 瞬时的动量值,用于计算滚动偏移的位置。
内容 网格
内容 网格是 一个 可配置的 XY 网格抽象模型的虚拟 内容 模型。所有 添加 到网格中的 内容 都会沿十字轴坐标系 按比 例缩放,以便于管理行或列的坐标。在每 一个 动画帧,动量移动沿十字轴移动到 一个 新的位置, 内容 网格会使用 一个 新的相对位置来更新它的子 内容 模型。
内容 模型
内容 模型用于为 内容 网格 添加 内容 。 内容 模型有宽度,高度和 一个 可选的 html 模板,以及 一个 图片 占位。每 一个 内容 块也保持各种原始波形值对应于它自己的屏幕上滚动的进程。这些波形值可以映射出 一个 内容 模型 DOM 元素在时间和空间上的任何动画状态。
GitHub: https://github.com/garris/TremulaJS
网站描述: 无限循环 js 轮播图 插件
TremulaJS官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。