Scroll

13 个动效将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。

Hide on Scroll Header (滚动隐藏头部)

别称 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation

向下滚动时头部隐藏,向上滚动时重新出现。

移动端和长页面的导航栏

Horizontal Scroll Section (横向滚动区块)

别称 Horizontal Scrolling, Scroll-jacked Horizontal Gallery

纵向滚动时,一排被固定的面板横向移动。

图库、作品集、时间线

Parallax (视差滚动)

别称 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero

滚动时各图层以不同速度移动,营造出纵深感。

首屏背景、落地页

Pinning (滚动固定)

别称 Pinned Section, Sticky Section, Scroll Pin

在一段滚动范围内,元素固定在原位,其他内容或动画继续推进。

滚动驱动的叙事、功能展示

Scroll Progress Indicator (滚动进度条)

别称 Reading Progress Bar, Progress Bar

随着用户滚动页面或文章,进度条或圆环逐渐填满。

文章、长页面

Scroll Snap (滚动吸附)

别称 Scroll Snapping, Snap Scrolling

滚动停止时会吸附到预设的位置,例如幻灯片或区块。

轮播、整屏区块、图库

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-Triggered Animation (滚动触发动画)

别称 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions

元素进入或离开视口时,动画播放一次。

淡入区块、延迟显现

Smooth Scroll (平滑滚动)

别称 Smooth Scrolling, Inertia Scroll

滚动和锚点跳转带缓动地平滑滑动,而不是生硬地跳动。

锚点导航、追求高级质感的页面

Stacking Cards (滚动堆叠卡片)

别称 Sticky Stacking Cards, Card Stack Scroll

滚动时卡片吸附在顶部并层层叠放,先前的卡片通常会略微缩小。

功能列表、作品集

Sticky Header Shrink (吸顶头部收缩)

别称 Shrinking Header, Shrink on Scroll

用户向下滚动后,吸顶头部的高度或尺寸会缩小。

导航栏

Text Marquee on Scroll (滚动文字跑马灯)

别称 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity

页面纵向滚动时,大号文字行横向滑动。

品牌标语、首屏区块

Zoom on Scroll (滚动缩放)

别称 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom

随着用户滚动,元素或场景放大或缩小。

首屏开场、图片放大展开

将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。