切图秀基于 html5+css3 前端切图实现微场景秀
温馨提示：该项目只部分代码开源，开源部分遵循开源协议 GPL。未开源部分请咨询作者后使用。
什么是切图秀？
我们把切图秀定义为基于 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)切图秀
评论