概述

这是我学习课程impress让你的内容“舞”起来而做的总结和练手。

你可以点这里在线预览我做的ppt

注意：等加载完了之后，点击空格键翻页！

简化模板

下面是一个简化的模板

<!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. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

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

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  3. 如何使用impress.js做一个网页版本的PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...

  4. js仿ppt，在线演示文档：Impress.js

    (附件) Impress.js是一款基于css3转 换和过渡.工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10)).并受prezi.com的理念启发 ...

  5. impress.js学习总结

    impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...

  6. 体验Impress.js

    用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...

  7. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  8. [转] impress.js学习

    引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...

  9. impress.js 一个创建在线幻灯的js库

    真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 ...

随机推荐

  1. HTML - input(转)

    自: http://www.runoob.com 标签定义及使用说明 <input> 标签规定了用户可以在其中输入数据的输入字段. <input> 元素在 <form&g ...

  2. sendmail报错Relaying denied

    配置好sendmail后,使用php的mail()发送邮件,出现 SMTP server response: 550 5.7.1 Relaying denied. IP name lookup fai ...

  3. python中的re模块——正则表达式

    re模块:正则表达式 正则表达式:为匹配字符 import re #导入re模块 #re.findall('正则表达式','被匹配字符') re模块下findall用法 在正则表达式中: \w 表示匹 ...

  4. python入门（一）：进入python的交互模式、pip的使用和数据类型

    环境安装: https://www.python.org/ pycharm 社区版路径: http://www.jetbrains.com/pycharm/download/download-than ...

  5. Java的学习05

    今天学习了,Java中的LinkedList类.这个类需要用到链表的知识,以前一直以为,只有c/c++有链表.今天才知道,原来其他语言.也有链表,而且还是双向链表. /** * 自定义一个链表 * @ ...

  6. Appium 学习二：切换Webview

    由于测试的APP是混合应用,即包含了原生代码和web网页. 混合应用在应用程序中嵌入了Webview,Webview是用来访问网页的一个控件.Webview内核也分为原生和第三方(比如腾讯X5内核) ...

  7. create react app遇到的问题

    我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求 ...

  8. C语言变量声明内存分配

    转载: C语言变量声明内存分配   一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 程序运行时由编译器自动分配,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  9. 【python深入】获取对象类型及属性

    在python中,查看当前的对象所能够调用的所有方法? 查看类型可以通过type,也可以通过isinstance方法,查看属性可以通过dir() 下面是对type的介绍: ————>基本类型的判 ...

  10. java 期末考试复习

      //Scanner这样写? Scanner input = new Scanner(System.in); //不断获得下一个单词 names[i] = toTitleCase(input.nex ...