您的位置：首页 > Web前端 > JavaScript

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

2015-03-15 01:23 495 查看 
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>Impress.js Demo - 孤影</title>
<style type="text/css">
body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;}
div.step h3{display: inline-block;}
div.step{width:400px; height: 100px; padding-top: 50px; text-align: center; border:1px solid #00FF66; box-shadow: 0px 0px 10px #00FF66; border-radius: 20px;}
div#overview{border:0px; box-shadow:0px 0px 0px transparent; }
</style>
</head>
<body>
<div class="impress-not-supported"></div>

<div id="impress">
<div class="step" data-x="0" data-y="0"><h3>《Poker Face》</h3> - Lady Gaga</div>
<div class="step" data-x="500" data-y="0">I wanna hold them like they do in Texas Plays.</div>
<div class="step" data-x="500" data-y="-400">Fold them let them hit me raise it Baby stay with me..</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">(I love it.)</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">Love game intuition play the cards with Spades to start.</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
And after he's been hooked I'll play the on that's on his heart.
</div>
<div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>
</div>

<script type="text/javascript" src="impress.js"></script>
<script type="text/javascript">
impress().init();
</script>
</body>
</html>


本实例完整代码
　　如果还需要再看看开头我做的那个演示实例的话，留言邮箱吧。

　　当你制作出这么一个简单的演示文稿后，你应该记住，使用它制作出的效果如何，你的想象和创造力是唯一决定性的因素！

体会：

　　正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。

　　优点：


个人非常喜欢overview的功能

因为HTML+CSS都需要自己完成，位置和效果都得自己经手，视觉效果都由自己掌控

在我用过的同类产品中视觉效果最绚，CSS3+3D效果，直接给观众看晕:)

　　缺点：


impress在视觉表现上确实非常强大，比起同样做演示文稿的 html5slides 和 deck.js， impress.js的复杂度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的时间.

*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料，视觉效果会稍差一些，不过上手会简单不少。

不要把3D和旋转用得太花哨、太绚，看的人会晕，恰当就好哈
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航