苹果官网新款mbp介绍页touchbar效果怎么做出来的？？

http://w优艾设计网_Photoshop论坛ww.apple.com/cn/macbo...

自学前端一段时间了，很喜欢研究一些交互效果怎么做出来的，最近新mbp发布于是在官网看到这个视频跟随网页位置变动的效果，有没有大神知道怎么做到的？

---

u1001280 2022-06-04 15:42

为什么视频会变化？（我猜是优艾设计网_设计百科）通过javascript阻止自动播放并且获得页面向下滚动位置的数值来定位进度条君，所以你看到的是一贞一贞而不是流畅的视频（我觉得有待改进）那么你看到的css transform其实只是用来定位装视频的大div，使其一直在网页的可视区域内。

---

有你好看的一天 优艾设计网_设计客 2022-06-04 15:44

我一直很喜欢一个程序员朋友告诉我的一句话，不管方法是什么，能实现就是牛逼。而题主说的这个动画实现方法事实上并没有针对动画使用css，而是通过一种更简洁（但是并不简单）的方式实现。

---

vipcms 2022-06-04 15:48

优艾设计网_PS交流

作者：刘翎TiGer链接：https://www.zhihu.com/questio...来源：知乎著作权归作者所有，转载请联系作者获得授权。

---

一丈优艾设计网_电脑技术红如是 2022-06-04 15:52

你看到的动画效果只是一个mp4视频 。浏览器开发工具里面查看resource -> frame / http://www.apple.com下面有个media的文件夹就可以看浏览器里cache的这个video

---

dominicbfz 优艾设计网_PS百科 2022-06-04 16:01

给你找了以前一个知乎朋友的回答：

---

笨蛋女人只能爱我 2022-06-04 16:02

优艾设计网_PS交流

以上

---