站在巨人的肩膀上——制作酷炫web幻灯片

• 在线演示1
•  
• 本地下载  

 

你是否还在用ppt做一些毫无意思的幻灯片？你是否在做ppt的时候绞尽脑汁想把效果做的吸引大家？你是否想通过一次ppt吸引领导的注意？那好吧！来学学怎么制作一款炫酷的web幻灯片~

ps：如果看到这里还不感兴趣就请先看看素材演示，这个演示是前些时候给组里新人介绍HTML5的时候自己做的一款幻灯片！

 

工具

1. 一款最近版本的chrome浏览器（火狐，safari也可）
2. 一款趁手的IDE工具
3. impress.js君（您也可下载本页素材进行自己需求的修改）

 

优点

几乎不需要写任何JS，只需要在每个子页DOM处添加几个属性就可达到效果！至于CSS嘛，根据你的幻灯片需求，看情况写啦！

操作时候可以用键盘空格、光标或者鼠标滚轮控制幻灯片切换

 

原理

看完效果大多数人应该就了解了原理，在这里还是罗嗦一下：其实每一个子页就是id为impress的div下的一级div，impress将他们每个起始位置或动画角度定好（由我们来配），当子页出现时候通过平滑的css动画过度到屏幕正向面前。就好像一张大纸上画了好几个div，屏幕就像一个放大镜焦点，从第一个div开始，挨个看div，在过程中不断平移或旋转这个大纸（3d效果动画另说）。

 

HTML部分结构

2. ....
3. id="impress">
4. class="step">子页一

class="step">子页二

class="step">子页三

class="step">子页四

....

....

 

 

JS代码部分

除了引入impress.js就是下面这句了：

 

 

API

• data-x：幻灯片的x坐标（子页面出现时候进行平移）
• data-y：幻灯片的y坐标（子页面出现时候进行平移）
• data-z：幻灯片的z坐标（子页面出现时候进行z轴深度的平移）
• data-scale：缩放。通过指定一个值来进行缩放，将该子页出现时进行放大，同时其他子页就会相对变小
• data-rotate：旋转。通过一个数字度数来确定旋转你的幻灯片
• data-rotate-x：为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
• data-rotate-y：为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
• data-rotate-z：为3D用，这个数字度数是它应该相对z轴旋转多少度。

一共就这几个参数，配置在每个子页div的DOM上

 

DEMO

1. ……
2. …………
3. <div id="title"class="step" data-x="0" data-y="0" data-scale="4">
4. <span class="try">进入正题span>
5.  

6. HTML 5</sup>h1>

7. <span class="footnote"><sup>*sup>W3C万维网联盟span>
8. </div>

10. 语义h3>

11. <img src="img/yy.png" width="100%">
12.  
13. <p class="font6">HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。
14. </p>
15. div>
16. …………
17. ……

 

 

 这是幻灯片中的一个片段，截取了源码中两个子页代码，从这里可以读出3个要点：

1. 每个子页是一个div，必须有一个step作为class，如果没有，这个div将不会在幻灯片进行时候出现
2. api中的属性写在子页div中
3. 每个子页的自定义css可以定义class或者id写在css文件中

 

到这里，聪明的读者应该已经迫不及待的，想要靠自己的智慧想要去亲手做一个了。但是这时候我再废话几句我的源码：

1. 1. class="step slide"data-x="-1000"data-y="-1500">
   2. src="img/h5.png">
   3.  

   4. HTML5 介绍