开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
切图秀首页、文档和下载 - 基于 html5+css3 前端切图实现微场景秀 - 开源中国社区
全部项目分类
我要评价
开源受限软件
HTML/CSS
跨平台
qietuwang
分享
收藏
16 人收藏
收录时间:2017-06-25
切图秀 详细介绍
温馨提示:该项目只部分代码开源,开源部分遵循开源协议 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次,值为&ldquo;infinite&rdquo;代表无限循环。)

<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)切图秀

切图秀

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 切图秀 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部