如何根据页面滚动同时执行动画？

jianglou417

549

发布于
2020-09-22

新手上路，请多包涵

如图，随着手指滑动，动画同时进行，而且可以回滚，这样的动画要怎么做？

前端 css3

阅读 4.7k

3 个回答

得票最新

VisionM

1.4k1110

发布于
2020-09-22

✓ 已被采纳

额，很明显这是一个‘一镜到底’的timeline动画。你可以将当前滚动距离转换为整个动画的进度。结合tweenmax的timeline动画。例如，你的场景是10个屏幕，整个滚动距离是10screenHeight,整个时间动画从0-》1。那么当前的进度就是scrollTop/10screenHeight。然后回滚当然也是动画的一部分。

你可以使用这个canvas框架 http://tinyjs.net/ 我们使用过，感觉不错

具体的实现思路，你可以搜索一镜到底，随便找了个https://segmentfault.com/a/11...

查看全部 3 个回答

推荐问题

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？
遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码条件是布尔值或者函数返回值，cb 是函数 {代码...}
27 回答13k 阅读
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}
8 回答3.5k 阅读✓ 已解决
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？
6 回答1.3k 阅读✓ 已解决
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。
5 回答5.3k 阅读✓ 已解决
网站的不同域名互相跳转如何保持登录态？
一个网站部署了多个域名（不是子域名），比如：www.abc.com和www.aaa.com,如何从一个域名跳转到另一个域名的时候，仍然保持登录态呢？
6 回答1.1k 阅读
如何在浏览器开发者工具中导入本地JS文件并直接运行？
在浏览器的开发者工具源代码面板下的工作区导入一个本地文件夹，然后创建一个js文件，里面写一段js脚本，那么我此时可以直接运行这个js脚本吗？如果可以该怎么操作。
3 回答1.7k 阅读
前端有没有办法实现页面截图？
前端有没有办法实现页面截图？不是html-to-canvas那种实现，而是类似于windows上各种截图工具那样，直接截取屏幕上图像目前搜到的全是html-to-canvas的方案
3 回答2k 阅读✓ 已解决

如何根据页面滚动同时执行动画？

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

网站的不同域名互相跳转如何保持登录态？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

前端有没有办法实现页面截图？