向 Opus 5.5 发送这10个滚动动画术语，让AI自动为你的网站添加动效
Can't describe the scroll animation you want? Save 𝘁𝗵𝗲𝘀𝗲 𝟭𝟬 𝘁𝗲𝗿𝗺𝘀 and give them…
提供了一套结构清晰、可直接复用的 AI 交互工作流，不仅定义了术语，还给出了包含约束条件和验收标准的完整 Prompt，对开发者极具参考价值。
Can't describe the scroll animation you want? Save 𝘁𝗵𝗲𝘀𝗲 𝟭𝟬 𝘁𝗲𝗿𝗺𝘀 and give them straight to Opus 5.5:
无法描述你想要的滚动动画？保存这 10 个术语，直接发给 Opus 5.5：
→ Scroll-triggered: an animation plays once as an element scrolls into view, like a fade-in or a slide up → Scroll-linked: the animation's progress follows your scrolling, and scrolling back plays it in reverse → Parallax: foreground and background move at different speeds, which adds depth → Sticky: an element sticks to the screen at a certain point while everything else keeps scrolling, like a nav bar or section headers → Pin: a whole section locks in place while its content changes step by step as you scroll, then lets go when it's done → Scroll Snap: when you stop, it lines up with the nearest screen or card → Horizontal Scroll: you scroll down, the content moves left → Stagger: a group of cards comes in one after another → Text Reveal: a paragraph lights up word by word as you scroll → Progress Bar: a line at the top grows as you scroll, showing how far you've read
→ 滚动触发（Scroll-triggered）：元素滚入视口时播放一次动画，如淡入或向上滑动 → 滚动链接（Scroll-linked）：动画进度跟随你的滚动，回滚则反向播放 → 视差（Parallax）：前景和背景以不同速度移动，增加层次感 → 粘性（Sticky）：元素在特定位置固定在屏幕上，而其他内容继续滚动，如导航栏或区块标题 → 固定（Pin）：整个区块锁定在原地，随着滚动逐步改变内容，完成后释放 → 滚动吸附（Scroll Snap）：停止滚动时，自动对齐到最近的屏幕或卡片 → 水平滚动（Horizontal Scroll）：向下滚动时，内容向左移动 → 交错（Stagger）：一组卡片依次出现 → 文字揭示（Text Reveal）：随着滚动，段落逐字高亮显示 → 进度条（Progress Bar）：顶部的一条线随滚动增长，显示阅读进度
To use them on 𝘆𝗼𝘂𝗿 𝗼𝘄𝗻 𝘀𝗶𝘁𝗲, send this to Opus 5.5 👇
要在你自己的网站上使用它们，将此发送给 Opus 5.5 👇
"Read the web pages in my current project. If there are several pages, ask me which one to change first. Pick from these 10 scroll effects and add them where they fit: Scroll-triggered, Scroll-linked, Parallax, Sticky, Pin, Scroll Snap, Horizontal Scroll, Stagger, Text Reveal, Progress Bar. Put any effect I name exactly where I say. 1. First give me a table: which section, which effect, and why. List the sections where nothing fits too, and don't add effects just to have them. If you're unsure, build a separate preview page that tries the candidate effects on my content. If you can open a browser, take a screenshot of the page before any changes. 2. Change nothing until I confirm. If the project already uses an animation library, stick with it; otherwise prefer CSS. Animate only transform and opacity. Use Scroll Snap only inside a local container. Make it responsive on phones and tablets, for example by turning horizontal scroll into a vertical stack and toning parallax down. For users with reduced motion turned on (prefers-reduced-motion), or in browsers that don't support scroll animations, skip the animation and just show the content. 3. When you're done, scroll from top to bottom at desktop and phone widths and check that nothing covers the content and nothing overflows sideways. If you can take screenshots, give me the after shots; if you can't, tell me which spots to check by hand."
"阅读我当前项目中的网页。如果有多个页面，先问我改哪一个。从以下 10 种滚动效果中选择并添加到合适的位置：滚动触发、滚动链接、视差、粘性、固定、滚动吸附、水平滚动、交错、文字揭示、进度条。将我提到的任何效果精确地放在我指定的位置。 1. 首先给我一个表格：哪个区块、哪种效果以及原因。列出没有任何效果合适的区块，不要为了凑数而添加效果。如果不确定，请构建一个单独的预览页面，在我的内容上尝试候选效果。如果可以打开浏览器，请在更改前截取页面截图。 2. 在我确认之前不要做任何更改。如果项目已经使用了动画库，请继续使用它；否则优先使用 CSS。仅对 transform 和 opacity 进行动画处理。仅在本地容器内使用滚动吸附。使其在手机和平板上响应式，例如将水平滚动转换为垂直堆叠，并减弱视差效果。对于开启减少动态偏好设置（prefers-reduced-motion）的用户，或不支持滚动动画的浏览器，跳过动画并仅显示内容。 3. 完成后，在桌面端和手机端宽度下从上到下滚动，检查没有内容被遮挡且没有横向溢出。如果可以截图，请提供更改后的截图；如果不能，告诉我需要手动检查哪些位置。"
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力