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

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

您可能感兴趣的相关文章

1. Turn.js

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

2. Flip Page

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

3. jFlip Plugin

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

4. Flip Counter

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

5. Bookblock

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

6. Flip

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

7. Booklet

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

8. Portfolio Flipping Slider

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

9. imBookFlip

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

10. Flippy

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

11. QucikFlip2

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

12. jQuery Notebook Page Flip Animation

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

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

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

推荐12款实用的 JavaScript 书页翻转效果插件的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. 【精心推荐】几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  3. 几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  4. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...

  5. 推荐几款实用的Android Studio 插件

    推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...

  6. 12个实用的 Javascript 奇淫技巧

    这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...

  7. 推荐几款我一直在用的chrome插件(上)

    我用的chrome插件挺多的,所谓工欲善其事必先利其器,我热衷于搜寻好用的工具来让我平时的工作事半功倍.下面介绍几款我正在用的感觉还不错的插件,如果大家还有其它好用的(肯定有,chrome插件库太庞大 ...

  8. 推荐几款我一直在用的chrome插件(下)

    请先看:推荐几款我一直在用的chrome插件(上) 6. Pocket 可以很方便的保存文章.视频等供以后查看,即实现了“Read it later”功能.有了 Pocket,您可以将所有想下次读的内 ...

  9. javascript跟随滚动效果插件代码(javascript Follow Plugin)

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

随机推荐

  1. ASP.NET MVC中简单使用Autofac

    项目中引入Autofac的目的是为了实现控制反转,即IoC,Inversion of Control.控制反转可以有效的降低类之间的相互依赖关系,增加架构的弹性,降低软件复杂度. 示例代码: IPro ...

  2. Nokia Lumia通过电脑来升级Windows Phone 8.1

    现在基本上所有lumia都推送了WP 8.1了,不过,有些朋友说在更新过程中常常断线,导致要重新下载.不知道是不是我的人品比较正能量,我从预览版升级,到正式版升级,都没有出现断网现象,每次都能顺利更新 ...

  3. 《BI那点儿事》数据挖掘各类算法——准确性验证

    准确性验证示例1:——基于三国志11数据库 数据准备: 挖掘模型:依次为:Naive Bayes 算法.聚类分析算法.决策树算法.神经网络算法.逻辑回归算法.关联算法提升图: 依次排名为: 1. 神经 ...

  4. Shader 简明入门教程

    Unity3D的所有渲染工作都离不开着色器(Shader),如果你和我一样最近开始对Shader编程比较感兴趣的话,可能你和我有着同样的困惑:如何开始?Unity3D提供了一些Shader的手册和文档 ...

  5. Android 软键盘弹出时把原来布局顶上去的解决方法

    键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity            android:name=& ...

  6. [python]进阶学习之阅读代码

    起因 最近在公司的任务是写一些简单的运营工具,因为是很小的工具,所以就用了github上面的一个开源项目flask-admin,可以省去很多的事情. 但是,这个开源项目是个人维护的项目,所以文档相对简 ...

  7. SpringMVC详细示例

    一.SpringMVC基础入门,创建一个HelloWorld程序 0.框架结构 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于springmvc的配置 < ...

  8. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  9. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  10. C# ~ 从 IEnumerable / IEnumerator 到 IEnumerable<T> / IEnumerator<T> 到 yield

    IEnumerable / IEnumerator 首先,IEnumerable / IEnumerator 接口定义如下: public interface IEnumerable /// 可枚举接 ...