84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
http://www.apple.com/cn/macbo...
自学前端一段时间了，很喜欢研究一些交互效果怎么做出来的，最近新mbp发布于是在官网看到这个视频跟随网页位置变动的效果，有没有大神知道怎么做到的？
ringa_lee
https://ihatetomatoes.net/app...通过stackoverflow找到的地址，虽然介绍的是mac pro的页面，但都算比较详细地讲解了整个网页结构和效果的实现
给你找了以前一个知乎朋友的回答：
我一直很喜欢一个程序员朋友告诉我的一句话，不管方法是什么，能实现就是牛逼。而题主说的这个动画实现方法事实上并没有针对动画使用css，而是通过一种更简洁（但是并不简单）的方式实现。
你看到的动画效果只是一个mp4视频 。浏览器开发工具里面查看resource -> frame / http://www.apple.com下面有个media的文件夹就可以看浏览器里cache的这个video
为什么视频会变化？（我猜是）通过javascript阻止自动播放并且获得页面向下滚动位置的数值来定位进度条君，所以你看到的是一贞一贞而不是流畅的视频（我觉得有待改进）那么你看到的css transform其实只是用来定位装视频的大p，使其一直在网页的可视区域内。
以上
作者：刘翎TiGer链接：https://www.zhihu.com/questio...来源：知乎著作权归作者所有，转载请联系作者获得授权。
https://ihatetomatoes.net/app...
通过stackoverflow找到的地址，虽然介绍的是mac pro的页面，但都算比较详细地讲解了整个网页结构和效果的实现
给你找了以前一个知乎朋友的回答：
我一直很喜欢一个程序员朋友告诉我的一句话，不管方法是什么，能实现就是牛逼。
而题主说的这个动画实现方法事实上并没有针对动画使用css，而是通过一种更简洁（但是并不简单）的方式实现。
你看到的动画效果只是一个mp4视频 。浏览器开发工具里面查看resource -> frame / http://www.apple.com下面有个media的文件夹就可以看浏览器里cache的这个video
为什么视频会变化？（我猜是）通过javascript阻止自动播放并且获得页面向下滚动位置的数值来定位进度条君，所以你看到的是一贞一贞而不是流畅的视频（我觉得有待改进）
那么你看到的css transform其实只是用来定位装视频的大p，使其一直在网页的可视区域内。
以上
作者：刘翎TiGer
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有，转载请联系作者获得授权。