84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
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...
来源:知乎
著作权归作者所有,转载请联系作者获得授权。