3d-flip-book 中文文档教程
3D FlipBook jQuery plugin
这个包是 flip-book 的别名。 用它代替这个。
3D FlipBook 是一个 jQuery 插件，允许将图像、PDF 或 HTML 作为翻页书浏览。 它可以以自然的方式用于演示杂志、书籍、卡片、小册子、小册子等等。 它有助于吸引用户的注意力并给他留下更多的印象。
从实时预览开始。
Main features
Version 1.7
- RTL mode
- Default template option in General Settings
Version 1.6
- CSS Layers
- Languages
Version 1.5
- PDF search
Version 1.4
- Thumbnails
- Flip sounds
- Deep linking
Version 1.3
- PDF bookmarks
- Printing
- Single page mode
- Control customization
- Fit view command
- Controllable script for templates
Version 1.2
- PDF links
- Mobile-Friendly
- Flipping sheet animation style
- Loading animation and progress
Version 1.1
- Smart pan mode
- Skins
- Flipping covers together with other pages
Version 1.0
- Realistic view
- Natural behaviour
- Flixible page corners
- User behaviour prediction system
- HTML, PDF, images as sources
- User friendly
- High perfomance
- Lightbox effect
- Interactive
- Responsive
- Easy to use
- Well documented
Details
Realistic view
3D 动画书 允许创建具有页面厚度的卷书。 它是现实世界中书籍或杂志最精确的计算机模型。
该插件能够模拟书籍打开过程。 模型书重复与真实原型相同的动作： 当封面打开或关闭时，内页会像生活中发生的那样变形。 变形可以定制。 您可以减少它或关闭它。
Natural behaviour
这个插件叫做3D FlipBook，当然可以实现翻页动画。
但这是非常普遍的能力，所以所有典型的插件都可以做到。 3D FlipBook 可以自定义翻页的形状，但还不够独特。
主要特点是使用专门设计的物理引擎来执行与用户的所有交互。 该引擎基于物理定律，因此所有用户对该模型的操作看起来都很真实。 该插件允许您将页面拖放到一起。 引擎解决碰撞并显示自然场景。
物理引擎有很多属性：重力、质量、灵活性、翻页速度等等。 但是几乎没有必要知道如何使用该插件，因为所有这些属性都有默认预设。
Flexible page corners
3D 动画书 的主要目标是最大限度地提高用户友好性。 友好的主要关键是对用户行为习惯。 我们是怎样翻书的？ ——当然是拿着一个角拖着一页！ 3D FlipBook 是一款已知的具有此类功能的 3D 插件。
Skins support
支持皮肤使定制变得非常容易。 只需选择合适的皮肤即可。 现在有适用于浅色和深色主题的皮肤 - 最通用的皮肤。
Smart pan
3d FlipBook 具有智能算法，以最舒适和适合用户的方式显示书籍。 它会自动选择屏幕上的书籍比例和对齐方式，不允许用户将书籍拖出视口。 平底锅只会进行平滑的移动，这对用户来说似乎非常友好。 所有这些功能使这本书看起来更丰富。
HTML, PDF, images as sources
该插件可以使用 PDF、图像和 HTML 作为页面的纹理。 支持 HTML 格式作为纹理是一项新技术，没有其他插件支持它。 HTML 允许轻松创建交互式书籍、处理用户事件、管理插件行为。 使用 HTML 纹理是开发网络动画的下一个重要步骤。
User behaviour prediction system
该插件不仅漂亮而且很聪明。 它具有用户行为预测系统。 3D 动画书 跟踪用户操作并尝试预测下一个必要的页面。 在后台加载预测页面并呈现它们。 当用户转到下一页时，它就可以显示了。
3D 动画书 使用页面加载的优先级。 首先，它加载对用户页面可见，然后是预测页面。 可以自定义要预测的页面数量和用户页面使用的数量来预测他的行为。
User friendly
3D 动画书 旨在最大限度地提高用户友好性。 它具有用户熟悉的翻页控件。 灵活的边角帮助用户理解他可以通过拖放技术翻页。 物理引擎以类似于现实世界的方式计算页面转换。 造型书接近自然书——体积和形状都一样。 可以使用坚硬的平封面来制造硬弯曲和使用柔性页面，使整本书柔性或扁平。
该插件专门设计了页面加载过程的动画。 它是为不同的页面颜色自动创建的。 3D 动画书 将动画颜色计算为页面颜色的反转。 它看起来适合所有颜色。
3D 动画书 支持全屏模式。 在这种模式下看杂志很舒服，它们看起来像活的一样。
有时改变闪电很有用。 3D 动画书 为其用户提供了这种能力。 用户可以更改闪电以适合他。 这是阅读长文本的重要选择。
High performance
插件性能不依赖于页面数量，因为它不管理单个页面。 3D 动画书 使用页面块，它允许在内存中仅对用户页面可见。 所以如果这本书是合上的，那么就会有 2 或 3 个块。 第一张是左封面，第二张是右封面，第三张是内页。 如果书被打开，则左右内页可以有两个块。 翻转动画执行时可以有更多块。 插件同时翻转50个以上的方块没有问题。 转弯完成后，转弯块与相邻块合并。
为了快速呈现 3D 图形，3D 动画书 使用 WebGL。 WebGL 是一种无需使用插件即可创建交互式 3D 图形的 API。
Interactive
支持 HTML 开启了创建交互式书籍的广泛能力。 它允许使用 CSS3 和 JavaScript，创建导航，使用悬停效果等等。
Responsive
3D 动画书 旨在占据您放置它的整个容器。 因此，如果容器大小发生变化，则 plagin 会重新计算其尺寸。 所以保持容器响应，插件也会响应。
Easy to use and customize
3D FlipBook 文档齐全，有很多示例和入门手册。 这很容易开始。 该插件支持皮肤，因此可以创建自己的皮肤或自定义现有的样式或模板文件。
该插件有很多自定义选项（请参阅文档）。 如果还不够，您可以编辑项目。 它以现代 JavaScript (ES6) 面向对象的风格编写。 很容易理解它是如何工作的。
How to use
请参阅示例。
Rebuilding
通过运行克隆主 git repo 的副本：
git clone https://github.com/iberezansky/flip-book-jquery.git
输入 flip-book-jquery-example 目录并运行安装：
cd flip-book-jquery && npm install
构建调试版本：
npm run build-debug
构建生产版本：
npm run build-production
3D FlipBook jQuery plugin
This package is alias for flip-book. Use it instead of this.
3D FlipBook is jQuery plugin that allows to browse images, PDFs or HTMLs as a flipping book. It can be used for demonstration magazines, books, cards, brochures, booklets and much more in natural way. It helps to attract user attention and make more impression on him.
Start from the live preview.
Main features
Version 1.7
- RTL mode
- Default template option in General Settings
Version 1.6
- CSS Layers
- Languages
Version 1.5
- PDF search
Version 1.4
- Thumbnails
- Flip sounds
- Deep linking
Version 1.3
- PDF bookmarks
- Printing
- Single page mode
- Control customization
- Fit view command
- Controllable script for templates
Version 1.2
- PDF links
- Mobile-Friendly
- Flipping sheet animation style
- Loading animation and progress
Version 1.1
- Smart pan mode
- Skins
- Flipping covers together with other pages
Version 1.0
- Realistic view
- Natural behaviour
- Flixible page corners
- User behaviour prediction system
- HTML, PDF, images as sources
- User friendly
- High perfomance
- Lightbox effect
- Interactive
- Responsive
- Easy to use
- Well documented
Details
Realistic view
3D FlipBook allows to create volume book, with page thickness. It is the most exact computer model of a book or a magazine from real world.
The plugin is able to simulate book opening process. Modeled book repeat the same actions as its real prototype: while the cover is opening or closing the internal pages are deforming as it happens in life. The deformation can be customized. You can reduce it or switch off.
Natural behaviour
The plugin is called 3D FlipBook, for sure, it can perform page flipping animation.
But this is very common ability so all typical plugins are able to do it. 3D FlipBook allows to customize the shape of flipping pages but it is still not enough to be unique.
The main feature is using specially designed physics engine that perform all interaction with a user. This engine is based on physics laws so all user actions with the model seems realistic. The plugin allow you drag and throw pages together. The engine solve the collisions and show natural scene.
Physics engine has a lot of properties: gravity, mass, flexibility, page flipping velocities and much more. But it is little necessary to know for using the plugin because all those properties have default presets.
Flexible page corners
The main goal of 3D FlipBook is maximum user friendly. Main key of being friendly is behave in habitual for user way. How are we used to turn pages in books? - of course it is dragging a page while holding a corner! 3D FlipBook is one known 3D plugin that has such feature.
Skins support
Supporting skins makes customization very easy. It is necessary just to choose appropriate skin and that is all. Now there are available skins for light and dark themes - the most universal ones.
Smart pan
3d FlipBook has smart algorithm to show the book in maximum comfortable and appropriate for user way. It automatically chooses book scale and alignment on the screen, disallows user to drag the book out of view port. The pan makes only smooth moves that seems very friendly for user. All these abilities help the book to look richer.
HTML, PDF, images as sources
The plugin can use PDF, images and HTMLs as texture for pages. Supporting HTML format as texture is a new technology no one of other plugins support it. HTML allow easily create interactive books, handle user events, manage plugin behaviour. Using HTML textures is next important step in development web animation.
User behaviour prediction system
The plugin is not just pretty but it is smart. It has user behaviour prediction system. 3D FlipBook tracks user actions and try to predict next necessary pages. In the background it loads predicted pages and renders them. When the user go to next page it is ready to be shown.
3D FlipBook uses priorities for page loading. First of all it loads visible for user pages then predicted ones. It is possible to customize amount of pages to predict and quantity of used by user pages for predicting his behaviour.
User friendly
3D FlipBook is designed to be maximum user friendly. It has familiar to user page flipping control. Flexible corners help user to understand that he can turn the page by means drag and drop technology. Physics engine computes page transforms in similar to real world way. Modeling book is close to natural book - it has the same volume and shape. It is possible to use hard flat covers to create hard bending and use flexible pages, make whole book flexible or flat.
The plugin has specially designed animation of page loading process. It is created automatically for different page colors. 3D FlipBook computes animation colors as inversion of page color. It looks nice for all colors.
3D FlipBook supports fullscreen mode. It is comfortable to watch magazines in this mode, they look like alive.
Sometimes it is useful to change lightning. 3D FlipBook gives to its users such ability. User can change lightning to do it appropriate for him. It is important option for reading long texts.
High performance
The plugin performance does not depend on number of pages because it does not manage single pages. 3D FlipBook works with blocks of pages, it allows to keep in memory just visible for user pages. So if the book is closed then there are 2 or 3 blocks. The first is left cover, the second is right cover and third is internal pages. If the book is opened there can be two blocks for left and right internal pages. There can be more blocks just when the flipping animation is performing. The plugin has no problem with more than 50 simultaneously flipping blocks. When the turn is finished the turned block merges with neighbour block.
For fast rendering 3D graphics 3D FlipBook uses WebGL. WebGL is a API for creating interactive 3D graphics without using plugins.
Interactive
Supporting HTML opens wide abilities for creating interactive books. It allows to use CSS3 and JavaScript, create navigation, use hover effects and much more.
Responsive
3D FlipBook is designed to occupy whole container where you place it. So if the container size changes the plagin recompute its dimensions. So keep the container responsive and plugin will be responsive too.
Easy to use and customize
3D FlipBook is well documented, has a lot of examples and getting started manual. It is easy to start. The plugin supports skins, so it is possible to create own skins or customize style or template files of existing.
The plugin has a lot of customization options (see the documentation). If it is not enough you can edit the project. It is written in modern JavaScript (ES6) object oriented style. Very easy to understand how it works.
How to use
See the example.
Rebuilding
Clone a copy of the main git repo by running:
git clone https://github.com/iberezansky/flip-book-jquery.git
Enter the flip-book-jquery-example directory and run the installation:
cd flip-book-jquery && npm install
To build debug version:
npm run build-debug
To build production version:
npm run build-production
