一统江湖的大前端(1)——PPT制作库impress.js(含附件)

2024-06-05 19:00:00

《一统江湖的大前端》系列是自己的学习笔记，旨在介绍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变形

CSS-presentation.rar

来源：华为云社区作者：大史不说话

一统江湖的大前端(1)——PPT制作库impress.js(含附件)相关推荐

【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
<一统江湖的大前端>系列是笔者的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.今天要介绍的是大前端PPT制作库impress.js. ...
【一统江湖的大前端（8）】matter.js 经典物理
[一统江湖的大前端(8)]matter.js 经典物理我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1! ...
【华为云技术分享】【一统江湖的大前端（8）】matter.js 经典物理
[摘要] 介绍前端物理引擎matterjs基本使用及实战示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题 ...
一统江湖的大前端React.js-从开发者到工程师
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
一统江湖的大前端（7）React.js-从开发者到工程师
前言:<一统江湖的大前端>系列是自己学习前端笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的 ...
一统江湖的大前端（5）editorconfig + eslint——你的代码里藏着你的优雅
[摘要]<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新. 如果你对前端的理解还是写写页面绑绑事件,那 ...
一统江湖的大前端（4）shell.js——穿上马甲我照样认识你
[摘要]<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你 ...
一统江湖的大前端（3） DOClever——你的Postman有点Low
[摘要]<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你 ...
一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

最新文章

热门文章