JS插件:类似PPT翻页过渡动画效果

bespoke-fx 是一款类似 PPT 演示稿效果的 JavaScript 幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换，它内置了 23 种 CSS3 动画过渡效果，非常实用。

查看 DEMO

安装

可以通过 npm 或 bower 来安装在该插件。

$ bower install bespoke-fx
$ npm install bespoke-fx    

使用方法

该插件基于 bespoke.js 插件，使用时先要引入 bespoke.js 文件，再引入 bespoke-fx.js 文件。另外还需要引入 main.css 和 animations.css 样式文件。

<link rel="stylesheet" href="path/to/main.css">
<link rel="stylesheet" href="path/to/animations.css">
<script src="js/bespoke.js"></script>
<script src="js/bespoke-fx.js"></script>

该幻灯片插件的基本 HTML 结构如下：

<article>
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>              

初始化插件

可以使用下面的方法来初始化该幻灯片插件。

bespoke.horizontal.from('article', {
  fx: true
});

或者传入配置参数：

bespoke.vertical.from('article', {
  fx: {
    direction: "vertical",
    transition: "cube",
    reverse: true
  }
});

配置参数

bespoke-fx 幻灯片插件的配置参数如下：

• direction：动画的方向，可以是：horizontal 或 vertical。
• transition：指定过渡动画的类型，参考下面的多行过渡类型描述。
• reverse：设置为 true 强迫执行反向动画。

过渡动画

可用的 CSS3 动画过渡动画如下：

• move
• move-fade
• move-both-fade
• move-different-easing
• scale-down-out-move-in
• move-out-scale-up
• scale-up-up
• scale-down-up
• glue
• flip
• fall
• newspaper
• push
• pull
• fold
• unfold
• room
• cube
• carousel
• sides
• slide

设置单独幻灯片的参数

你可以通过 data-bespoke-transition、data-bespoke-direction 和 data-bespoke-reverse 来为某个幻灯片 slide 设置单独的参数。例如：

<section data-bespoke-fx-transition="cube"
  data-bespoke-fx-direction="vertical"
  data-bespoke-fx-reverse="true">Slide
</section>

bespoke-fx 幻灯片插件的 github 地址为：https://github.com/ebow/bespoke-fx.

转自 JQuery 之家
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201605203496.html