首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
usb
settings
random
jsp
grid
sum
nodejs
bash
hashtable
eval
post
include
erlang
shell
frameworks
function
command
keyword
filter
format
string
text
dockerfile
python
subset
tags
scala
cookie
datetime
tree
replace
actionscrip
instance
require
match
heap
python2
perl
future
solr
merge
iostream
javascript
hashset
stream
chat
regex
range
vba
expression
const
heatmap
cPlusPlus
timezone
typescript
search
hashcode
io
input
char
case
spring
hash
version
list
install
httpclient
md5
schema
emoji
bit
netty
header
int
cSharp
rsa
default
httprequest
c语言
当前位置:
开发笔记
>
编程语言
> 正文
苹果网站iPadAir介绍页,随着网页滚动设备翻滚和画面变化的效果具体怎么实现,是视频吗?-
作者:mobiledu2502892377 | 来源:互联网 | 2018-06-27 14:47
viaApple-iPadAir
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动画。 视频结合着视察滚动来呈现
ipad
css
javascript
html
chrome
safari
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
function
ECMA262规定typeof操作符的返回值和instanceof的使用方法
本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ...
[详细]
蜡笔小新 2023-12-10 17:31:51
text
Voicewo在线语音识别转换jQuery插件的特点和示例
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
text
常用的CSS属性及用法整理
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
text
CSS |网格行结束属性
CSS|网格-行-结束属性原文:https://www.gee ...
[详细]
蜡笔小新 2023-10-17 15:21:56
text
css元素可拖动,如何使用CSS禁止元素拖拽?
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
text
axure 动态面板 自动适应浏览器宽度_Axure技能:自适应移动设备屏幕大小(进阶教程)...
《Axure新技能:自适应手机屏幕大小》相信不少人都已经看过,并对设置方法已经很熟悉了,但该教程只能适应iphone6的屏幕尺寸的比例 ...
[详细]
蜡笔小新 2023-10-15 15:56:01
text
前端提高篇(七十):SVG基本使用、基本样式、路径path
SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ...
[详细]
蜡笔小新 2023-10-14 15:30:33
python
Python瓦片图下载、合并、绘图、标记的代码示例
本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ...
[详细]
蜡笔小新 2023-12-13 12:14:55
python
使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ...
[详细]
蜡笔小新 2023-12-12 19:16:21
text
深入理解CSS中的margin属性及其应用场景
本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ...
[详细]
蜡笔小新 2023-12-12 18:01:10
text
如何在HTML中获取鼠标的当前位置
本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ...
[详细]
蜡笔小新 2023-12-11 13:04:00
scala
响应式页面的概述和实现方式
本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ...
[详细]
蜡笔小新 2023-12-11 12:37:10
text
使用chrome编辑器实现网页截图功能的方法
本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ...
[详细]
蜡笔小新 2023-12-10 15:50:00
text
如何压缩网站页面以减少页面加载时间
本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ...
[详细]
蜡笔小新 2023-12-09 09:17:00
tags
Scrapy 爬取图片
1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ...
[详细]
蜡笔小新 2023-10-14 15:02:27
mobiledu2502892377
这个家伙很懒,什么也没留下!
Tags | 热门标签
usb
settings
random
jsp
grid
sum
nodejs
bash
hashtable
eval
post
include
erlang
shell
frameworks
function
command
keyword
filter
format
string
text
dockerfile
python
subset
tags
scala
cookie
datetime
tree
RankList | 热门文章
1
魔兽大脚插件怎么显示血条?魔兽大脚插件使用教程
2
VB.NET Boolean作用知识讲解
3
7个适合设计小白学的平面设计软件
4
mysql里面一个表就2m多。是不是小弟我设计的不合理
5
UDP数据包可以像TCP一样部分发送吗?
6
MAC MySQL安装后启动
7
dyld: Library not loaded: /usr/local/opt/readline/lib/libreadline.7.dylib
8
asp.net-vnext中的旧程序集引用错误
9
怎么生成一个永久性的二维码?微信群二维码如何长期有效?
10
虚电路(交换虚电路和永久虚电路)
11
elasticsearch 入门简介
12
苹果手机漏洞是什么?苹果手机集体遭殃介绍
13
android9自动安装权限9,按键精灵所有者读写权限安卓9.0如何获取?设置
14
智表ZCELL产品发布企业版
15
Pass4side最新考試題庫117101
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有