- 浏览: 150775 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
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 5482013年初接触移动端,简单做下总结,首先了解下移动we ... -
响应式布局这件小事
2013-02-28 11:49 861讲到响应式布局, 相 ... -
移动端开发小结
2012-05-17 11:31 10801.viewport viewport就是除去所有工具 ... -
CSS3动画库,很棒哦
2012-05-17 11:30 788官网地址Animate CSS官网地址 Github地 ... -
IOS下Safari渲染Transition时页面闪动Bug
2012-05-17 11:30 5954http://classjs.com/category/tec ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
91uu浮云【javascript实现】
2012-05-03 12:55 1415上一章节我们讲到,webo ... -
91uu浮云【简介】
2012-04-28 23:32 2853今天花了一天看了19lou云的代码,改了19lou的不足之处! ... -
针对webkit的HTML, CSS和Javascript
2011-12-15 16:23 1417前面有 一篇文章 介绍了HTML5的一些新特性以及技巧, ...
相关推荐
在本主题中,我们将深入探讨HTML5中的图书翻页效果,这是一种为在线电子书籍或文档提供模拟真实纸质书翻页体验的技术。这种效果使得用户在阅读时能够感受到更加沉浸式的阅读体验。 HTML5的图书翻页效果主要依赖于...
"HTML5 book 电子书翻页效果"是利用HTML5技术来模拟传统纸质书籍的翻页体验,使得数字阅读更加生动且具有沉浸感。 这种翻页效果通常基于HTML5的Canvas或SVG元素,以及JavaScript库如jQuery或更专业的图书展示框架,...
HTML5网页电子书翻页效果是一种现代化的网页设计技术,旨在提供类似真实书籍的阅读体验。这种技术结合了HTML5、CSS3以及jQuery等前端技术,以实现动态、交互式的页面翻转效果,同时保证在PC端和移动设备上的良好兼容...
在本主题中,我们聚焦于HTML5实现的图书翻页效果,这是一个模拟真实纸质书籍翻页体验的交互设计。 图书翻页效果通常涉及到CSS3的3D变换、过渡和动画效果,这些特性让网页元素能够进行平滑、动态的改变。在HTML5中,...
总结来说,H5满屏翻页效果是HTML5技术在网页设计中的创新应用,通过结合CSS3的动画效果和JavaScript的交互处理,为用户带来了独特的视觉和触觉体验。在实际开发中,开发者可以根据需求选择现成的插件或进行自定义...
本项目聚焦于“HTML5+JS电子杂志翻页效果”,这是一个利用HTML5的先进特性与JavaScript的强大功能来实现的高质量模拟纸质杂志翻页效果。这种效果能够提升用户的浏览体验,使在线阅读更接近于实体杂志的触感。 首先...
这个"html5基于插件实现的3D电子书翻页效果源码"是一个利用HTML5特性和插件创建的互动3D电子书翻页效果示例。这种效果能够模拟真实书籍翻页的感觉,为读者带来更沉浸式的阅读体验。 在HTML5中,实现3D翻页效果通常...
HTML5是现代网页开发的标准,它为网页设计者和开发者提供了许多增强用户体验的新特性。在网页中实现翻页效果是常见的交互设计需求,这通常...通过研究这些文件,可以更深入地理解如何在实际项目中实现HTML5翻页效果。
一款使用jQuery++制作的翻页特效示例,适用于制作像小册子(如日历、电子书等)这类应用的翻页浏览功能场景。 感兴趣的开发者可以下载源码,解压后导入MM开发环境进行修改优化,可跨平台导出apk(Android)和ipa...
总的来说,"jquery html5手机端翻书效果_手指滑动书本翻页效果代码"项目结合了HTML5、CSS3和jQuery的优势,创建了一个富有互动性的手机阅读体验。通过理解这些技术的原理和相互作用,开发者可以进一步定制和优化这个...
在本项目"html5 css3实现的3D全屏翻页效果代码"中,我们将探讨如何利用这两种技术来创建一个引人注目的、具有3D视觉冲击力的全屏翻页效果。 HTML5是超文本标记语言的第五个版本,它引入了许多新的元素和API,以更好...
本项目涉及的核心技术是基于HTML5的自适应滑动翻页效果,适用于在微信朋友圈分享。下面将详细介绍这个知识点及其相关技术。 首先,HTML5是现代网页开发的基础,它引入了许多新的功能和API,使得网页更具交互性和...
在移动端,HTML5页面翻页效果是为提升用户体验和互动性而设计的一种技术。这种技术在微信H5页面中尤其常见,因为它们可以提供类似图书翻页的动态体验,使得内容展示更加生动有趣,增强用户的浏览兴趣。接下来,我们...
HTML5是一种先进的网页标记语言,它在Web开发领域扮演着重要的角色,特别是在创建交互式和动态用户体验方面。这个“HTML5电子书翻页动画效果”压缩包文件显然包含了一种利用HTML5技术实现的电子书翻页动画效果,这种...
总的来说,书页翻页效果的实现涉及HTML5的基础结构,CSS3的视觉效果,以及JavaScript的交互逻辑。这种效果不仅提升了网页的视觉吸引力,也为用户带来了沉浸式的阅读体验,是现代Web开发中增强用户体验的一种重要手段...
这个“HTML5兼容电脑手机端3D翻页电子书特效.zip”压缩包包含了一套实现3D翻页效果的电子书模板,适合用于创建具有现代感和沉浸式体验的在线阅读平台。 首先,让我们来看看核心知识点: 1. **HTML5的语义化标签**...
要实现翻页效果,我们需要创建一个包含页面内容的容器,通常是一个div元素,它将作为翻页的主体。我们可以使用`<div class="page">`来定义这个容器,并在其中添加要展示的内容。此外,还需要两个按钮或触发器,用于...
在本实例中,我们主要探讨的是如何利用HTML5和CSS3技术实现一个“精美html翻页效果”。HTML5是超文本标记语言的最新版本,它引入了许多新的元素和API,提高了网页的可读性、可访问性和交互性;而CSS3则是层叠样式表...