Shutters
Shutters 为你的作品带来动感十足的视觉体验。它巧妙地模拟了百叶窗翻转的动态效果,让观众欣赏到内容随着叶片翻转而逐渐呈现的过程。Shutters 为你的作品带来了细腻的揭示过程,它特别适用于产品与场景的展示,为你的项目带来独特的视觉魅力,让观众留下深刻而难忘的印象。
组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。
组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。
组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。
组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。
组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。
组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。
组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。
组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。
组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。
组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。
组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。
组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。
组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。
组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。
组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。
组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。
组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。
组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。
Blade: Column (1 - 100)
设置百叶窗叶片的列数,较高的值会创造更细致的垂直分割效果。
Blade: Row (1 -100)
控制百叶窗叶片的行数,较高的值会产生更多的水平分割。
Blade: Reverse (Yes/No)
调整叶片的动画方向。启用后,叶片将从左至右翻转,而非默认的右至左方向。
Blade: Ease (EaseFunction)
为每个叶片动画添加缓动效果。
Direction (TL/TR/BL/BR)
设定动画的起始位置。动画将从选定的角落(左上/右上/左下/右下)开始,朝对角方向进行。
Overlap (0 - 1)
控制叶片动画的重叠程度。较高的值会使更多的叶片同时开始动画。
Perspective (0 - 1)
调节叶片的透视效果强度。较高的值会带来更明显的透视变形。
Reveals cool WebGL Effects Components for Framer.