v1.0
查看演示 立即下载

什么是切图秀?

我们把切图秀定义为基于h5前端切图实现的适合手机微信端浏览的比较炫酷的页面。并且开源切图秀的基础项目,它提供了一个可靠的基础去创建你的h5场景,你只需要发挥你的创意去组合动画。

作品

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

链接地址:http://ent.qq.com/a/20170507/017272.htm

实现原理

切图秀基于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>
<!--//背景音乐结束-->