切图秀

什么是切图秀？

我们把切图秀定义为基于 html5+css3 前端切图实现的微场景秀。并且开源切图秀的基础项目，它提供了一个可靠的基础去创建你的项目，你只需要发挥你的创意去组合动画。

作品

切图秀被用在了很多项目中，例如跟我们合作的汉口银行，肌肤管家，以及安以轩结婚请帖。

实现原理

切图秀基于jquery.fullpage，并且加以改造，融合了非常强大的css3动画库animate.css，通过非常简单的方式可以实现不同动画的调用。

使用方式

在head区域加入

<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/qtx.css"/>

在</body>前面加入

<script src="js/jquery-1.7.2.js" ></script>
<script type='text/javascript' src="js/jquery.fullPage.min.js"></script>
<script type='text/javascript' src="js/qtx.js"></script>

结构规则

<div class="fpLayout">

<div class="section page1">

xxx

</div>

<div class="section page2">

xxx

</div>

<div class="section page3">

xxx

</div>

</div>

添加动画

data-fp-animate="zysBounceIn" (必须要加，动画来源于animate.css动画库)

参考文档 http://developer.qietu.com/p/CSS3-Animation/tools.html

data-fp-delay="1s" (延迟1秒出现，非必要，不添加为不延迟)

data-fp-duration="1s" （动画时间1s，非必要，不添加默认为1s）

data-fp-iteration="10" （动画反复执行10次，非必要，不添加默认为1次，值为"infinite"代表无限循环。）

<img class="demo" src="images/zys_img3.png" data-fp-delay="0" data-fp-animate="zysBounceIn" data-fp-duration="1s"/>

关于loading

集成了波浪的进度条显示，它可以真实的反应当前的加载进度，增强用户体验。

<div id="fpLoading">
<div id='fpWaveWrap'>
<div class='fpWave fpWave1'></div>
<div class='fpWave fpWave2'></div>
<div class='fpWave fpWave3'></div>
<div class='fpLogo'><img src="images/qtx2.png"/></div>
</div>
<div id="fpLoadingTxt">
资源加载<span id="fpLoadingNum">0</span>%
</div>
</div>

关于背景音乐

集成了背景音乐播放功能，可以点击停止，再点击开启。

<!--背景音乐-->
<div id="fpMusic">
<audio src="mp3/WithanOrchid.mp3" preload="preload" loop id="fpMusicAudio"></audio>
<div id="fpMusicPlay">
<div id="fpMusicPlayBtn"></div>
</div>
</div>
<!--//背景音乐结束-->

qietu(.com)切图秀