炫酷的前端页面翻书动画效果

---

前言

不知道你们是否遇到这种需求，要求页面翻页实现一个模拟翻书的动画效果，对于这种需求有几种实现思路，我都尝试过，用纯css实现的会有一点生硬，用js和css实现的需要考虑很多适配的问题，后面再网上找了一个插件：turn.js，这个插件非常的好用。

我这里主要讲的是vue里面使用这个插件，其他框架类似，对于纯HTML开发的直接script引入即可

---

一、使用步骤

turn.js官网，turn.js是一款实现翻页效果的插件：
1、首先需要安装并引入jQuery(npm install jquery --save)
2、在官网下载turn.js 到本地，在项目中新建utils文件，把turn.js文件拷到utils中
3、开始引入，代码如下（示例）：

import $ from 'jquery'
//这个地址看自己放的位置在哪里
import turn from '../utils/turn'

4、到这里之后，你会发现运行项目后页面开始报错，会报turn定义但未使用的错，这个是jQuery引用有问题导致的，网上有一些解决方法，但是都比较麻烦，需要去改vue.config.js配置文件，我不建议这样做
5、现在讲讲我的方法：
在turn.js的源代码里面加一行代码即可

import jQuery from "jquery";

6、完成上面的步骤就可以开始使用这个翻书动画效果插件啦！！这个是一个简单的示例，具体的其他效果见官网

<div id="flipbook">
	<div class="hard"> Turn.js </div>
	<div class="hard"></div>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
	<div> Page 4 </div>
	<div class="hard"></div>
	<div class="hard"></div>
</div>
<script type="text/javascript">
	$("#flipbook").turn({
		width: 400,
		height: 300,
		autoCenter: true
	});
</script>

二、总结

以上就是今天我分享的内容，如果后面还有其他炫酷的前端页面翻书动画效果，我也会分享给大家的，后面有空我会写一个示例代码上传到资源里面，你们后面可以直接在我的资源里面下载。