【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
《一统江湖的大前端》系列是笔者的学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。今天要介绍的是大前端PPT制作库impress.js。
impress.js是什么
impress.js 是一款基于 css-3D 和 css动画 、受到高逼格PPT原型工具 prezi 启发而开发的演示文稿制作库,github上星星高达33k个,如果你已经厌烦了使用PowerPoint制作连自己都觉得丑的PPT，那么 impress.js 是一个非常好的选择，简洁高效逼格高。
获取impress.js库文件及官方示例请点击impress.js地址
关键API
下述api用于HTML标签属性，学习时直接对照官方代码仓中的example走一遍，看一遍示例代码，基本都能学会。
- data-x = 幻灯片的x坐标
- data-y = 幻灯片的y坐标
- data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
- data-rotate = 通过一个数字度数来确定旋转你的幻灯片
- data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
- data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
- data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。
实战示例
下面 CSS-presentation 可通过双击文件中的index.html直接打开，是以前团队内部分享时使用 impress.js制作的幻灯片，时间较短，直接套用了官方示例并对个别细节进行了调整，放出来方便大家参考交流。
CSS-presentation文件bbs.huaweicloud.com
相关原理
impress.js的框架原理并不复杂，写在html标签上的属性可以通过 document.querySelector('元素名').dataset["属性名"]的方式取得其值，然后将每一张幻灯片相关的值赋值给CSS3D相关的属性，并为其设定过渡时的渐变动画即可。
CSS3D是指transition渐变，animation动画以及transform变形。
作者：华为云享专家 大史不说话
【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js相关推荐
- 一统江湖的大前端(1)——PPT制作库impress.js(含附件)
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 一统江湖的大前端（4）shell.js——穿上马甲我照样认识你
[摘要]<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你 ...
- 一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- java velocity js_一统江湖的大前端（8）- velocity.js 运动的姿势(上)
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 一. CSS动画 和 JS动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区 ...
- 一统江湖的大前端（3） DOClever——你的Postman有点Low
[摘要]<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你 ...
- 【华为云技术分享】前端工程师必备：从浏览器的渲染到性能优化
摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部?2. js为什么要放在body后面?3. 图片的加载和渲染会阻塞页面DOM构建吗?4. dom ...
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密（下）
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
- 【华为云技术分享】“技术-经济范式”视角下的开源软件演进剖析-part 1
前言 以互联网为代表的信息技术的迅猛发展对整个经济体系产生了巨大的影响.信息技术的发展一方面使知识的积累和传播更加迅速,知识爆炸性的增长:另一方面,使信息的获取变得越来越容易,信息交流的强度逐渐增加, ...
- 【华为云技术分享】“技术-经济范式”视角下的开源软件演进剖析-part 3
4. 微观层面 4.1 个体动机 在开源软件发展之初, 商业组织的投入很少甚至没有, 完全是靠Richard Stallman 或者 linus Torvalds 这样的个人在努力推动开源软件艰难前行 ...
最新文章
- shell 开机自动执行_windows还能这么玩？开机自动念情书
- bzoj3786: 星系探索
- oracle修改数据库国际字符集,Oracle修改数据库字符集
- Windows Server 2012 GUI与Core的切换
- 拼音模糊查询+java,jquery拼音模糊查询
- windows 窗口实现隐藏任务栏预览
- Week15 - 程序设计思维与实践 - 字符串算法
- torch.kron（）函数
- 计算机英语缩略词大全,计算机英语缩略语大全
- GitHub 热点速览 Vol.14：周获 2k+ Vim³ 掀起三维编程风
- 线性空间，度量空间，赋范空间，线性赋范空间，内积空间，巴拿赫空间以及希尔伯特空间、拓扑空间
- java如何数字竖排输出_Java输出竖排文字
- 机器学习 数学基础 学习笔记 （1） 导数
- Hive 练习（带数据）
- Apache下favicon.ico文件找不到的问题
- 附件上传功能测试用例
- 计算机vf基本知识,计算机等级考试VF基础知识部分
- 全网最全C盘清理指南，无需安装清理软件，值得收藏
- 亚马逊防关联（收藏 一生受用）
- HP中国区总裁孙振耀的退休感言1