Shutters

Shutters 为你的作品带来动感十足的视觉体验。它巧妙地模拟了百叶窗翻转的动态效果,让观众欣赏到内容随着叶片翻转而逐渐呈现的过程。Shutters 为你的作品带来了细腻的揭示过程,它特别适用于产品与场景的展示,为你的项目带来独特的视觉魅力,让观众留下深刻而难忘的印象。

拷贝组件

组件已拷贝

属性控制

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

组件特性

图像 & 视频

组件支持图像或视频作为输入媒体。兼容 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)

调节叶片的透视效果强度。较高的值会带来更明显的透视变形。

探索下一个效果

Reeded Glass

Reeded Glass Effect Cover
Reeded Glass Effect Cover
Reeded Glass Effect Cover

Reveals cool WebGL Effects Components for Framer.