turn.js书本翻页效果插件

 

可以制作软纸页或者硬纸页的翻页动画，可设置双页或单页展示。

 

GitHub地址：GitHub - blasten/turn.js: The page flip effect for HTML5

官网：Turn.js: The page flip effect in HTML5 (turnjs.com)

中英文PDF文档：阿里云盘分享 (aliyundrive.com)

 

如果想改变触发区域大小，需修改插件源码：

flipOptions = {

    // Size of the active zone of each corner

    cornerSize: 100

},

将数值调大即可。

 

如果要修改翻页时的背景色，也需要修改插件源码：

gradient(data.ashadow,
              point2D(left?100:0, top?0:100),
              point2D(gradientEndPointA.x, gradientEndPointA.y),
              [[gradientStartVal, 'rgba(0,0,0,0)'],
              [((1-gradientStartVal)*0.8)+gradientStartVal, 'rgba(0,0,0,'+(0.2*gradientOpacity)+')'],
              [1, 'rgba(255,255,255,'+(0.2*gradientOpacity)+')']],
              3,
              alpha);

三个rgba数值都是，根据颜色需要修改即可。