如何用impress.js写有逼格的ppt
概述
这是我学习课程impress让你的内容“舞”起来而做的总结和练手。
注意：等加载完了之后，点击空格键翻页！
简化模板
下面是一个简化的模板
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>a mod of impress.js</title>
</head>
<body>
<div id="impress">
<div class="fallback-message">
Your browser doesn't support impress.js. Try Chrome or Safari.
</div>
<div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0">
<p>This is my first slide. </p>
</div>
</div>
</body>
</html>
这是我简化后的模板，去除掉了一些css加载，js加载和注释的相关语句。
当然这个模板不能正常运行，但是可以很清楚的看出使用impress.js的相关语法
首先是head头部：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>a mod of impress.js</title>
</head>
按惯例添加元信息和标题，和一般的html文件一样。
然后是body部分：
<div id="impress">
先建立一个id="impress"的div，表示初始化它里面impress的相关语句；
<div class="fallback-message">
Your browser doesn't support impress.js. Try Chrome or Safari.
</div>
然后是class="fallback-message"也就是回调函数的div，表示如果浏览器不支持就返回这些信息：Your browser doesn't support impress.js. Try Chrome or Safari.；
<div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0">
<p>This is my first slide. </p>
</div>
最后是id="first" class="step"的div，表示这是一张幻灯片。
解释一下幻灯片语句里面的相关参数：
id="first"这张幻灯片的id，可以自定义，方便css文件中调。class="step"表示这是一张幻灯片，必须写step。data-x表示这张幻灯片的x轴偏移量，y，z也是同理。data-rotate表示这张幻灯片的三围旋转量，x，y，z也是同理。data-scale表示这张幻灯片的放大缩小量。
思考
其实impress.js使用起来非常简单，只要照个能用的模板，修改一下变量就会了。
我个人觉得，虽然impress.js在幻灯片的切换运动效果上非常有逼格和高大上，但是对于单张幻灯片的细枝末节却需要一点一点的写代码，非常麻烦，还不如用powerpoint。所以impress.js只适用于注重幻灯片的切换效果的场合，比如商业总结性报告，在线简历等。
如何用impress.js写有逼格的ppt的更多相关文章
- 一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- 如何使用impress.js做一个网页版本的PPT
blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...
- js仿ppt，在线演示文档：Impress.js
(附件) Impress.js是一款基于css3转 换和过渡.工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10)).并受prezi.com的理念启发 ...
- impress.js学习总结
impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...
- 体验Impress.js
用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...
- impress.js初体验
概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...
- [转] impress.js学习
引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...
- impress.js 一个创建在线幻灯的js库
真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 ...
随机推荐
- css一些特殊选择器
css一些特殊选择器1.在box中,从第几个div开始选择,以后的都会选择到,以下代码表示从#box里面的第二个div开始选择:#box div:nth-of-type(n+2){}2.选择奇数个:d ...
- Flannel网络插件配置
# ps -ef|grep docker|grep bip FLANNEL_OPTIONS="-ip-masq=true" -ip-masq=true 这个参数的目的是让flann ...
- 剑指offer例题——链表中倒数第K个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 编程过程 此处采用两个指针依次后移的方法来求解,首先,用一个指针移到第k个位置,之后将第二个指针放在第一位,与第二个指针一同移动,当第二个指针移动 ...
- Windows server 2012 R2 解决“无法完成域加入，原因是试图加入的域的SID与本计算机的SID相同
Windows server 2012 R2 解决“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同.”使用克隆的系统时,加域是出现如下问题.“无法完成域加入,原因是试图加入的域的SI ...
- sys、os 模块
sys 模块常见函数 sys.argv #命令行参数List,第一个元素是程序本身路径 sys.exit(n) #退出程序,正常退出时exit(0) sys.vers ...
- jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
- SpringBoot集成Jasypt安全框架,配置文件内容加密
我们在SpringBoot项目中的yml或者properties配置文件中都是明文的,相对而言安全性就低了很多.都知道配置文件中的都是一些数据库连接用户名密码啊.一些第三方密钥等信息.所以我们谨慎点, ...
- protobuff 编译注意事项
把protoc.exe增加到环境变量path,这样方便运行protoc 生成C++代码 protoc -I=Proto文件路径 –cpp_out=指定输出.h和.cc的目录 Proto文件 具体参数 ...
- Eigen子矩阵操作
1 子矩阵操作简介 子矩阵操作又称块操作,在矩阵运算中,子矩阵的提取和操作应用也十分广泛.因此Eigen中也提供了相关操作的方法.提取的子矩阵在操作过程中既可以用作左值也可以用作右值. 2 块操作的一 ...
- http协议和四个层之间的关系
TCP/IP协议的分层:应用层.传输层.网络层.数据链路层. ····应用层···· 决定了向用户提供应用服务时通信的活动.HTTP协议存在于该层.(FTP文件传输协议,DNS域名系统) ....传输 ...