## PPT 模式的视差滚动 [Home](https://clone.tools/) 看起来挺适合以产品介绍为主的网站。 ![CleanShot 2023-03-27 at 21.12.16.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-03-27%20at%2021.12.16.gif) ## 画面解构 ![3D Animation in Interface by Barry for Zajno on Dribbble.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/3D%20Animation%20in%20Interface%20by%20Barry%20for%20Zajno%20on%20Dribbble.gif) ![2023-02-25 12.32.16.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2023-02-25%2012.32.16.gif) ## Z轴层级，体现层次 在 SaaS 里很常见通过滚动把产品界面给扶正了。 [Atomize Design System](https://atomizedesign.com/#pricing) ![CleanShot 2023-10-24 at 13.40.57.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-24%20at%2013.40.57.gif) ### Yahaha [Create - Get know Yahaha, create multiverse without coding!](https://yahaha.com/create#for_all_skill_levels) 视觉效果好，2D转3D ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Export-1690000840119.gif) ### frame.io ![2023-02-26 19.02.32.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2023-02-26%2019.02.32.gif) ### Play ![CleanShot 2023-06-13 at 13.21.22.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-06-13%20at%2013.21.22.gif) ### 运用蒙版 [Masterland官网-上海会朗](https://www.master-land.com.cn/) ![CleanShot 2023-10-30 at 22.04.41.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-30%20at%2022.04.41.gif) <https://www.depo.studio/> ![CleanShot 2023-10-06 at 15.23.55.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-06%20at%2015.23.55.gif) ### 拉远镜头 ![2023-10-06 15.34.36.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2023-10-06%2015.34.36.gif) ## 固定局部 (Sticky) 并滚动 [Manage your team’s work, projects, & tasks online • Asana](https://asana.com/?noredirect) ![CleanShot 2023-06-09 at 12.24.42.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-06-09%20at%2012.24.42.gif) ![CleanShot 2023-04-17 at 13.12.46.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-04-17%20at%2013.12.46.gif) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2022-01-12%2013.21.48.gif) ![2021-08-08 11.40.16](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-08-08%2011.40.16.gif) ## 模块尺寸的变化 在页面滚动时，原本小的模块，变成了通栏模式。 ## 竖向转换到横向浏览 ## 颜色和亮度变化 比如从白色背景变成了深色背景，然后突出一个主体，视觉效果估计不错。 假设：背景变暗，然后主题亮色的，就很酷炫，舞台聚光灯。 ## 不同元素的位移和缩放 - Apple.com 产品落地页运用的非常好。 - [Depo Studio](https://www.depo.studio/) - ![2023-10-06 15.29.43.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2023-10-06%2015.29.43.gif) ### 滚动图片出现时，缩小尺寸 ## 横向滚动的文案 ## 字体粗细变化 ## 始终有一个主体存在，背景变化。 [House of Gucci — An Inside Look](https://houseofgucci.aristidebenoist.com/) ![Screen Recording 2023-01-23 at 14.13.52.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Screen%20Recording%202023-01-23%20at%2014.13.52.gif) ![[飞书20220709-145855.mp4]] ![[AdvancedDecimalCod-mobile.mp4]]