推荐12款实用的 JavaScript 书页翻转效果插件

简介:   Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一。他们可以用在 Flash,网页或者在线杂志中。使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内容,更加醒目和直观有效。
+关注继续查看

  Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一。他们可以用在 Flash,网页或者在线杂志中。使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内容,更加醒目和直观有效。

  除了结合 HTML5 和 CSS3 可以实现这样的动画,也有很多优秀的插件可以帮助你。下面给大家推荐12款最好的 jQuery 书页翻转(Flipbook)插件。

您可能感兴趣的相关文章

  

1. Turn.js

Turn.js 是一个 JavaScript 库,这将使你的内容看起来像一本真正的书或杂志。Turn.js 是基于 HTML5 的杂志,书籍或目录的最佳选择,只有15KB,适用于手机及平板电脑的浏览器,利用了硬件加速。

 

2. Flip Page

SONY DSC

这个插件用于实现图像的翻转效果(2D 体验的书页翻转) 。它利用了 HTML5 & CSS3 硬件加速和,也可以在移动浏览器中正常工作。

 

3. jFlip Plugin

jFlip

这个插件可以让你把一个图片库做成一本书。您可以翻转书页来查看下一张或上一张图片。鼠标悬停在画廊的上的时候可以点击或拖动的动态的角落处进行翻页。

 

4. Flip Counter

flipcounter

flipCounter 是一个 jQuery 插件,让枯燥的数字显示变成一个大的,漂亮的翻页动画显示。适合用于倒计时,计数器等等。

 

5. Bookblock

bookblock

BookBlock 是一个插件,它可用于创建小册子风格的组件,允许“翻页”的导航。任何内容都可以使用,如图像或文本。插件转换只在需要时使用了一些重叠的影子的页面来创建更逼真的效果。

 

6. Flip

flip

Flip 是一个 jQuery 插件,让你可以很容易的在四个方向翻转你的元素。允许您定义要翻转你的内容的方向,你也可以定义背景颜色,动画的速度,并且它还支持 onAnimation 和 OnEnd 动画中的给定时间的动画执行。

 

7. Booklet

booklet

小册子可能是这些插件中选项最多的一个,因为它允许配置每个变量。页面可以手动打开,通过键盘,可以前后链接切换或者自动播放。

 

8. Portfolio Flipping Slider

Portfolio-Flipping-Slider-flipbook-plugin

这个翻转滑块插件非常适合用于个人作品集的展示,这种翻转效果是通过在用户点击分页触发的。因此当用户点击作品集中的图像时,图片会翻转360度,当其动画近端影像会以全新的姿态改变。

 

9. imBookFlip

imBookFlip-jquery-flipbook

imBookFlip 插件可以把一个 iframe 或直接在页面上显示的内容变成书本效果。它的页面可以设置为打开时,手动点击或作为自动播放,遗憾的是不支持页面拖动。此外,它的 API 允许直接指向所需的页面。

 

10. Flippy

flippy

Flippy 是一个轻量级的跨浏览器的 jQuery 翻页效果插件,它可以让你翻转你想要的任何 HTML 元素,值得一试。

 

11. QucikFlip2

quickFlip2

QuickFlip 工作原理是利用动画的快捷方式迅速翻转 。同时允许翻页效果平滑地与任何一块标记,无论图像,背景或 CSS,此快捷键可以提高性能。

 

12. jQuery Notebook Page Flip Animation

这款奇特的 jQuery 笔记本外观使用一个叫做 jQuery Booklet 的 jQuery 动画插件来实现逼真的书本效果。

 

本文链接:12 Best jQuery Flipbook Plugins for Developer

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
1月前
|
JavaScript
js公告小插件
js公告小插件
23 0
|
2月前
|
数据可视化 JavaScript 前端开发
数据可视化大屏辅助插件API(1):javascript封装时间函数
数据可视化大屏辅助插件API(1):javascript封装时间函数
30 0
|
2月前
|
JavaScript 前端开发
javascript插件:countUp.min.js数字滚动效果
javascript插件:countUp.min.js数字滚动效果
32 0
|
2月前
|
JavaScript 数据可视化
数据可视化大屏使用ipad-page-flip插件JS库制作Flipping Book的样式表解决方案
数据可视化大屏使用ipad-page-flip插件JS库制作Flipping Book的样式表解决方案
31 0
数据可视化大屏使用ipad-page-flip插件JS库制作Flipping Book的样式表解决方案
|
2月前
|
JSON JavaScript 前端开发
JavaScript将csv转为json的解决方案(2):papaparse.js插件
JavaScript将csv转为json的解决方案(2):papaparse.js插件
44 0
|
4月前
|
JavaScript 前端开发 程序员
推荐三个神级VSCode插件[jupyter中写javascript,替代typora的markdown编辑器,记录敲代码时间的插件]
使用过Python的朋友应该都知道Jupyter-Notebook,因为它对新手朋友学习Python可谓是绝佳的工具,对Python老手来说使用它来写一些小Demo或者绘图分析都是非常不错的工具,我们都知道,最近,我开始了深入学习JavaScript的路途,偶尔为敲一下js来验证书中的说法以及自己的想法,同时可能会记一下笔记,然后可能还需要刷Leetcode
273 0
|
4月前
|
JSON JavaScript 前端开发
|
7月前
|
JavaScript 前端开发 CDN
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件
110 0
skycons.js 基于canvas的天气动态js插件
|
7月前
|
JavaScript 前端开发 Java
javaScript 10 正则表达式(了解即可,后面都用插件)
javeScript中正则的常见用法与正则插件的分享
javaScript 10 正则表达式(了解即可,后面都用插件)
|
8月前
|
JavaScript
JS动态插入插件后,不能马上使用,必须刷新
JS动态插入插件后,不能马上使用,必须刷新
67 0
相关产品
云迁移中心
推荐文章
更多