• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 苹果网站 iPad Air 介绍页,随着网页滚动设备翻滚和画面变化的效果具体怎么实现,是视频吗?

苹果网站 iPad Air 介绍页,随着网页滚动设备翻滚和画面变化的效果具体怎么实现,是视频吗?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Apple,iPad,Air,via等相关知识,匿名希望在学习及工作中可以帮助到您
via Apple - iPad Air

回复内容:

页面使用了比较常见的单页呈现方式。

具体的实现方式:
1.将页面内容分为若干个单页,每个单页都使用整个可视区域显示;
2.通过监听 鼠标滚动/右侧导航列表的点击 事件触发页面切换;
3.切换子页面时,有两个入口:正向/逆向。用来控制页面中动画的播放方向。

页面中的动画的确是使用了视频(源文件:http://images.apple.com/media/us/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/story/story.mp4),不过也可以使用 CSS3/Canvas/WebGL 方式,但开发和兼容都比较麻烦,用视频很方便,不过会有文件过大(原视频 16.1M)和分辨率无法自适应的问题。

附送 Lao3D 上的 iPad 模型,WebGL 实现:捞3D —— iPad

append @2013-10-26 23:07:50
原页面中的视频均无法加载了,然后全部替换为图片了。尚不清楚是网络问题,还是苹果自己删除了视频。 谢邀

learnshare 说的大体上是对的,就是视频,不过视频只有一段,而且 URL 也是固定的。


苹果把各个展示页面分成 n 层叠在一起,每层都占满整个屏幕,同时最上面有个层用来播放视频。
页面滚动时,通过改变不同层的 z-index,旧的一层沉下去,新的一层浮上来,同时通过 javascript 控制视频的播放方向和进度(HTML5 提供了一组API 用来操作视频)。
当然用别的技术也可以实现。除了 Canvas, CSS3, WebGL 什么的,苹果以前在官网还用过一个丧心病狂技术,使用照片序列做水平方向上的 3D 展示,记得用了 70 多张各角度的照片,不过现在找不到那个链接了。 第一次被人邀请啊,哈哈。
刚才看了一下,的确是视频,使用Chrome开发者工具可以看到有一段mp4的请求。
具体原理上面的learnshare已经解释的很清楚了,我也就不多说了。

不过learnshare说到的分辨率无法自适应的问题,苹果是采用类似“响应式”的方案,其实也就是放了几个不同分辨率的视频,事先判断是desktop还是tablet等来决定加载哪个视频。比如对于desktop使用的视频就是分辨率为2880*1800、大小为16M的,而对于iPad使用的就是分辨率为1342*1064、大小为10.3M的。

实际上苹果也是对这个视频做了分割的,比如这段(http://images.apple.com/media/cn/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/intro/intro.mp4 ),但是用桌面浏览器浏览的时候直接请求了完整的视频,没仔细看代码,可能分割的视频是用来在移动设备分段加载节省流量的吧。

另外……苹果做了浏览器的检测,Safari/Chrome/Firefo访问是视频,而IE访问的时候……只有图片你懂的……

啰嗦了这么多,请见谅= =|| 谢邀。看了是mp4。 感谢邀请。这是视频。 并不是完全的css或js动画。 视频结合着视察滚动来呈现

您可能想查找下面的文章:

  • 苹果官网设计翻转特效如何实现?
  • 苹果官网新款 Mac Pro 的介绍页面是怎样用 HTML5 做到了如此流畅的动画?
  • 苹果网站 iPad Air 介绍页,随着网页滚动设备翻滚和画面变化的效果具体怎么实现,是视频吗?
  • 零基础的人如何在一个月内做出令人惊讶的网站?

相关文章

  • 2018-12-03做导航栏为什么用ul>li,而不用dd dt dl?
  • 2017-08-06解决Firefox下不支持outerHTML问题代码分享
  • 2018-12-03HTML5 History API 实现无刷新跳转 _html5教程技巧
  • 2018-12-03angular的$watch方法详解
  • 2018-12-03如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果?
  • 2018-12-03使用jquery实现HTML5响应式导航菜单教程_html5教程技巧
  • 2017-08-06HTML5 微格式和相关的属性名称
  • 2018-12-03字中字效果的实现【html5实例】_html5教程技巧
  • 2018-12-03作为一个前端,看到怎样的网页效果,你一定会停下来看看他的源码?
  • 2018-12-03H5移动端各种各样的列表的制作方法详解(三)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5的结构和语义(5):交互_html5教程技巧
    • html5 canvas中绘制字体与图片以及图形模糊问题解决
    • 用HTML5制作一个简单的桌球游戏的教程_html5教程技巧
    • html5小游戏在微信朋友圈火,你怎么看这件事?
    • Knockoutjs+select2 人员搜索功能代码分享
    • HTML5幻灯片系统:H5Slides
    • HTML5之3__测试浏览器是否支持HTML5
    • HTML5 css3:3D旋转木马效果相册
    • 前缀data-属性和dataset的使用方法
    • HTML5实现页面切换激活的PageVisibility API使用初探_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有