- 浏览: 143293 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
http://www.html5china.com/course/20111012_2244.html
简介 2010年F-i.com和Google Chrome团队合力致力于主题为《20 Things I Learned about Browsers and theWeb》( www.20thingsilearned.com )的web app的宣传教育。这个项目最主要的思想是在传达,用web展现电子书的… 简介 打开电子书,可以看到一个背景图片,它包含纸张的材质和书籍效果。 在mouseDonwHandler中,检测鼠标是在书的左边还是右边按下,记得得知翻页的方向。我还需要知道翻页方向的下一张是否还有页面,因为我们会遇到第一页或最后一页的情况。如果所有的flip选项都有检测没有问题,设置该flip对象的dragging属性为true。 如果页面正在拖动,那么他的target值设置为鼠标坐标相对于电子书宽度的位置,而不是实际的像素值。同时progress也会一点点增加至target值,这样翻动每帧都会更新,也就得到了我们看到的页面平滑的翻动动画效果。 页面翻动时的折叠效果.HTML5开发的翻页效果
2010年F-i.com和Google Chrome团队合力致力于主题为《20 Things I Learned about Browsers and the Web》(www.20thingsilearned.com)的web app的宣传教育。这个项目最主要的思想是在传达,用web展现电子书的内容是最合适的选择。因为展现电子书的内容是前所未有的web技术,我们坚信以现在的技术完全可以用一个容器来展现这样的例子。
书籍的封面同时也是《20 Things I Learned About Browsers and the Web》的主页(www.20thingsilearned.com)
我们认为,要实现阅读真正书籍的感觉最好的方法是模仿书籍的阅读体验,同时充分利用电子媒介的优势如导航。我在书籍的视觉和交互效果上面下了很大的功夫,特别是翻页的效果。
开始制作
本教程会带领里学习HTML5电子书的制作流程,并教你用canvas元素和JavaScript来制作自己的电子书。关于JavaScript的基础代码,如变量声明和事件侦听等不在本教程的范围内,具体请参考实例源代码。
开始之前,我们还是先看一下demo的效果吧,这样我们可以有目的行的去学习。
电子书结构
你一定要时时记住,在canvas里绘制的所有信息都无法被搜索引擎搜到,也无法由用户在浏览器中搜索到。由于这个原因,我们在DOM中显示文本内容,然后由JavaScript来操控它。所以电子书的结构非常简单:
逻辑
实现翻页效果的代码并不是很复杂,但代码量很大,因为有很多图形效果需要用代码实现。首先我们从代码中的常量开始说起,它的使用贯穿整个程序。
贯穿代码中的常量,用来跟踪鼠标交互并绘制翻页页面
下一步需要为每个页面定义一个flip对象,在翻页交互过程中,它会持续更新来反应当前翻页的状态。
Progress和target值用来定义页面的折叠量,可以是-1到+1之间的值.
现在每个页面都有自己的flip对象了,下面我们学获取用户的鼠标位置,并根据这个值开始翻页。
在mouseUpHandler中,我们会检测每个页面是否被拖动,如果是则释放该页面的拖动。停止拖动后,页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新,作为页面的导航。
渲染
现在大部分的逻辑运算都已经完成了,下面我们要学习如果在canvas元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成,这个方法每秒钟会执行60次,来实时更新翻动页面的状态。
因为每一帧都要遍历所有的页面,所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%),或者页面的flagged属性值是dragging,我们认为该页面是当前活动的页面。
现在所有的逻辑运算都已经完成了,下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。
现在所有的值都一个就位,万事俱备,只差绘制页面了!
绘制翻动页面的起始点,同translate(x,y)方法,将其从canvas的左上角移动到书脊顶端,这样简化了绘制的逻辑
foldGradient方法用来填充折叠的页面,同时绘制真实的高光和阴影效果。同时我还为页面绘制了一条很窄的黑边,防止在较亮的背景下页面“消失”。
现在剩下的就是用我们前面定义的变量绘制折叠的页面。页面左右两侧用直线绘制,顶部和底部绘制弯曲的曲线,产生一种纸张折叠的感觉。页面的折叠程度由verticalOutdent值决定。
全文结束!现在你得到的是一个完整的HTML5电子书。
翻书实例Demo
翻页效果是为了像用户传递正确的翻页体验,所有本教程中的图片无法让你感受到效果,点击下面的链接体验一下最终的结果。
发表评论
-
移动web资源整理
2016-05-12 10:42 5062013年初接触移动端,简单做下总结,首先了解下移动we ... -
响应式布局这件小事
2013-02-28 11:49 820讲到响应式布局, 相 ... -
移动端开发小结
2012-05-17 11:31 10091.viewport viewport就是除去所有工具 ... -
CSS3动画库,很棒哦
2012-05-17 11:30 750官网地址Animate CSS官网地址 Github地 ... -
IOS下Safari渲染Transition时页面闪动Bug
2012-05-17 11:30 5877http://classjs.com/category/tec ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
91uu浮云【javascript实现】
2012-05-03 12:55 1165上一章节我们讲到,webo ... -
91uu浮云【简介】
2012-04-28 23:32 2260今天花了一天看了19lou云的代码,改了19lou的不足之处! ... -
针对webkit的HTML, CSS和Javascript
2011-12-15 16:23 1386前面有 一篇文章 介绍了HTML5的一些新特性以及技巧, ...
相关推荐
一款使用jQuery++制作的翻页特效示例,适用于制作像小册子(如日历、电子书等)这类应用的翻页浏览功能场景。 感兴趣的开发者可以下载源码,解压后导入MM开发环境进行修改优化,可跨平台导出apk(Android)和ipa...
html6game 设计开发的 book 动态翻页效果,使用了jQuery框架,建议在Chrome、火狐浏览器和IE9浏览器下使用 功能特点: 支持ie9 ,html5浏览器。 单页和双页。 自动播放和暂停。 点击左右翻页。 鼠标点击左右页面...
效果不错,能够上下翻页,有兴趣童鞋可以学习学习,据说是失传已久的江湖秘笈,哈哈~~建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~统一开发环境是一款HTML5跨平台一站式应用开发、...
HTML5实现3D翻页电子书特效是一款适用于手机端的3D翻页效果电子书特效。
主要为大家详细介绍了Turn.js实现很棒的翻书效果,对Turn.js翻书效果的实现进行总结,感兴趣的小伙伴们可以参考一下
HTML5电子书翻页动画特效源代码
本功能是以读书管理为例子而实现的翻页功能,目的希望大家很够很容易掌握它,同时将它学会。希望能给大家带来方便! Web应用开发的JavaServer Pages技术方法 在开发JSP规范的过程中,太阳微系统公司(Sun ...
统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具, 它支持HTML5跨平台开发,原有Java跨平台插件支持Android、Symbian、Kjava的跨平台和原生开发,已覆盖Android、iOS、WP、Symbian、Kjava操作系统平台...
包括多种css3, javascript和html5(包括canvas)等多种效果例子:进度条,下拉框,登陆,翻页,搜索,钟表,日期插件,相册,侧框,宣传栏,立体旋转,鼠标效果,按钮,放大镜,音量控制,动态墙,视频等等50多种...
Android项目源码本站发布的第5个动画源码集项目是一个安卓动画app,包括字体闪烁、抽屉式拖动、listview上拉刷新、翻页效果、二维码扫描、3d图片旋转、通讯录、fragment的滑动添加、android对HTML5的加载、view的...
4.9.2 翻页动作(CCPageTurn3D) 130 4.9.3 波纹动作(CCWaves3D) 130 4.9.4 格子动作类(CCGridAction) 131 4.10 动画动作类 132 4.10.1 精灵帧 133 4.10.2 精灵帧缓冲 134 4.10.3 动画类 135 4.10.4 动画动作 ...
伦敦时装周开发制作(001) 财富·雪山和院html5响应式(002) 翻书式手机场景应用(003) 故宫手机场景应用(004) 婚礼请柬手机场景应用(005) 2014中国自媒体年会场景应用(007) 择居网人才招聘手机场景应用(008) 卡片式...
自己积累和整理的一个安卓动画app,包括字体闪烁、抽屉式拖动、listview上拉刷新、翻页效果、二维码扫描、3d图片旋转、通讯录、fragment的滑动添加、android对HTML5的加载、view的开门动画、镜头由远及近的效果、...
实例125 应用HTML标记进行跳转 186 实例126 使用脚本语言实现页面跳转 187 5.3 包含文件 189 实例127 include()函数的应用 189 实例128 include_once()函数的应用 190 实例129 require()函数的应用 191 ...
最近看到iPhone上的日历上下无线滚动效果很炫,就尝试自己实现。 在网上看到这个StreetScroller(https://developer.apple.com/library/ios/samplecode/StreetScroller/Introduction/Intro.html) 就拿他改了一下,...
Android项目源码本站发布的第5个动画源码集项目是一个安卓动画app,包括字体闪烁、抽屉式拖动、listview上拉刷新、翻页效果、二维码扫描、3d图片旋转、通讯录、fragment的滑动添加、android对HTML5的加载、view的...