Motion Prompt #078|滚动吸附 · Scroll snap(中文译文)
滚动结束时自动对齐区块;中文译文,效果未实测。
来源:import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0320/translation-zh.md · 授权:MIT License Copyright (c) 2026 Shohei Ohtaki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
使用示例提示词正文
请使用“Scroll snap”(スクロールスナップ),它是“Landing page & web effects”中的一个名称。 Motion Prompt #078 定义:滚动最终精确停在下一分区。 示例展示:用户小幅滚动后,页面自行完成剩余移动,使下一分区顶部与视口顶部对齐。 规格: - 每节与视口等高,均为168 px;第一节浅蓝,第二节深蓝。 - 每2.4 s吸附一次;0.45–0.85 s用户只滚动34 px,使用cubic ease-out。 - 0.9–1.5 s页面自行移动余下134 px,使下一节顶部对齐,使用cubic ease-out。 - 第二个2.4 s以同样方式向上返回第一节,表现scroll-snap-type: y mandatory的行为。 何时使用:用于希望像幻灯片一样逐个整屏阅读的页面。 参考实现(Canvas 2D,画面仅由时间决定的函数):https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/078.txt 共享辅助代码:https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp.js 请保持参考实现的形状、时间安排和缓动数值不变,只调整文字、颜色和素材,以适配我正在制作的项目。
使用示例
示例输入
请实现“滚动吸附 · Scroll snap”:滚动结束时自动对齐区块;中文译文,效果未实测。
示意结果
下方是来源作者提供的静态画面和可播放动效参考,并非本站对该提示词调用模型生成的结果。
提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。