逼真电子书翻页效果
逼真的电子书翻页效果，模拟纸书翻页那一套，做得还挺细致的。视觉上有“翻纸感”，交互也流畅，适合做电子杂志、图文教程这类阅读体验要求比较高的项目。你只要搞懂了 HTML、CSS，再搭配一些jQuery或者Three.js动画，就能实现不错的效果。
动态图片做得比较顺滑，比如你翻页时图像不会突然跳变，加载也还蛮快的。只要你提前压缩好图片、好格式，基本不会卡顿。像logo.png这种页面元素，也可以跟着翻页一起动，有“电子书”那味儿。
文字过渡也得不错。比如一页的段落结束，下一页文字接上时，不会模糊、不抖动，用了Web 字体配合CSS3的渐变或阴影，有种自然滑入的感觉。你要是用得不顺，可以看看Linux 公社书籍前言.htm这个文件，挺适合拿来参考排版。
文件夹里还有个turntest，率是测试用例。你可以直接跑起来，看看翻页逻辑怎么走，动画是怎么触发的。调试时加点 console.log，观察事件，像onPageTurn()这种函数应该好上手。
嗯，对了，这类效果在移动端上也能跑，但你得考虑不同分辨率的适配。别用太重的图片，文字字号要根据屏幕自动调一下。体验做到位了，用户才会多翻几页不是？
如果你对这个感兴趣，还可以顺手看看这些相关资源：电子书翻页动画插件适合做 3D 风格的；安卓电子书源代码里面有动态翻页的实现思路；还有jQuery 电子书手册，上手翻页动画也不难。
文件大小：249.6KB
评论区