提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“吸顶文字淡入淡出”(Sticky Text Fade)效果,也叫 sticky scroll text opacity fade。
该区块滚动期间,文字块固定在原位,各行随滚动进度逐行淡入淡出。
让淡入淡出直接跟随滚动位置,往回滚动时随之反转;无论透明度如何,每一行都要能被屏幕阅读器读到。相似的动效
ABCDEFGHIJKLMNOPQRSTUVWXYZ
在里面滚动
Text Reveal (文字显现)
别称 Scroll Text Reveal, Word-by-word Reveal
随着用户滚动,段落中的文字从暗淡变为完全不透明。
适用场景
宣言或引言段落
在[应用位置]添加“文字显现”(Text Reveal)效果,也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的,随着用户滚动,每个词依次亮到完全清晰,与滚动位置绑定。
向上滚回时文字重新变暗;无论暗淡程度如何,整段文字都要始终能被屏幕阅读器读取。ABC
A
B
C
在里面滚动
Pinning (滚动固定)
别称 Pinned Section, Sticky Section, Scroll Pin
在一段滚动范围内,元素固定在原位,其他内容或动画继续推进。
适用场景
滚动驱动的叙事、功能展示
在[应用位置]添加“滚动固定”(Pinning)效果,也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时,一个面板要固定在原位,并随正在阅读的步骤切换内容,区块结束时再解除固定。
优先使用原生的 sticky 定位,而不是劫持滚动;并确保在小屏幕上即使没有固定面板,每个步骤也依然易读。A
在里面滚动
Scroll-Linked Animation (滚动驱动动画)
别称 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
动画进度直接绑定滚动位置,向前滚动时播放,向回滚动时倒放。
适用场景
叙事型页面、进度效果
在[应用位置]添加“滚动驱动动画”(Scroll-Linked Animation),也叫 scroll-driven animation 或滚动擦洗(scroll scrub)。
动画要严格跟随滚动位置:向下滚动时正向播放,向上滚动时当场倒放,自身不带基于时间的缓动。
把整段动画映射到一个明确的滚动区间;如果用户开启了“减少动态效果”(prefers-reduced-motion),就显示一个合理的静态状态。Text 中的其他动效
Stroke Text Draw (描边文字绘制)
别称 Draw In Text, Animated Stroke Text
先以描边绘出字母轮廓,再显示填充。
适用场景
Logo、首屏大字
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果,也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出,轮廓完成后填充再淡入。
页面加载时只播放一次,让文字保持为可访问的真实文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示已填充的文字。AGBHCIDJEKFL
将鼠标悬停在上面
Text 3D Flip (文字3D翻转)
别称 3D Flip Text Reveal
字母或单词绕轴做 3D 翻转,露出背面的下一段文字。
适用场景
悬停链接、标题
在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果,也叫 3D flip text reveal。
指针移到文字上时,每个字母绕水平轴做 3D 翻转,露出另一面的新字母,一个接一个快速顺滑地扫过;指针移开时再翻回来。
翻转过程中保持文本框尺寸不变,键盘聚焦时也显示同样的效果。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果,也叫 organic text distortion。
一行文字不断横向流动,同时自然地扭曲、起伏,仿佛隔着流动的水去看,流动由用户的滚动驱动。
扭曲要足够轻,保证文字可读,在较慢的设备上也要流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭该效果。