一统江湖的大前端(1)——PPT制作库impress.js(含附件)
《一统江湖的大前端》系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,绝对是专业的蹭热点小能手。
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制作的幻灯片,时间较短,直接套用了官方示例并对个别细节进行了调整,放出来方便大家参考交流.
相关原理
impress.js的框架原理并不复杂,写在html标签上的属性可以通过 document.querySelector('元素名').dataset["属性名"]的方式取得其值,然后将每一张幻灯片相关的值赋值给CSS3D相关的属性,并为其设定过渡时的渐变动画即可。
CSS3D是指transition渐变,animation动画以及transform变形
来源:华为云社区 作者:大史不说话
相关文章
- 欲练JS,必先攻CSS——前端修行之路
- 【华为云技术分享】【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具
- 【华为云技术分享】【一统江湖的大前端(8)】matter.js 经典物理
- 一统江湖的大前端(8)- velocity.js 运动的姿势(上)
- 浏览器前端js获取文件的MD5值
- Js基础知识6-JavaScript匿名函数和闭包
- js函数 test.caller 谁在调用test函数
- Node.js包的依赖及版本号(转)
- vue项目中抽离.vue文件中的js代码
- [Node.js] Level 7. Persisting Data
- 调试异步加载页面中的js文件
- 如何使用 multiparty 工具库在 Node.js 应用里解析 multipart form-data 格式的请求
- chrome扩展程序开发之在目标页面运行自己的JS
- Atitit 获取一列拼接为字符串 逗号分隔 目录1.1. Sql Group_contackt,但是排序只能拍一个的。。如果多个列对应排序则不行。。。 11.2. Js 使用map函数 1
- JS点击切换背景图
- 一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力
- 一统江湖的大前端(7)React.js-从开发者到工程师
- js 根据传入数字,返回千、万、百万、千万、亿等单位
- webSocket 前端 js 加入 心跳机制 的基本写法
- JS实现99乘法表
- js之瀑布流的实现
- 前端之 JS 实现全选、反选、取消选中
- 微信小程序前端wxml调用js方法并获取返回值
- web前端框架JS学习之JavaScript类型转换
- JS导出网页所有内容为excel
- 慕课网前端项目:Vue2.0+Node.js+MongoDB全栈打造商城系统 笔记 整理【4/18】
- 慕课网前端项目:Vue2.0+Node.js+MongoDB全栈打造商城系统 笔记 整理【6/18】
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等