一统江湖的大前端(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变形
一统江湖的大前端(1)——PPT制作库impress.js的更多相关文章
- 【一统江湖的大前端(8)】matter.js 经典物理
目录 [一统江湖的大前端(8)]matter.js 经典物理 一.经典力学回顾 二. 仿真的实现原理 2.1 基本动力学模拟 2.2 碰撞模拟 三. 物理引擎matter.js 3.1 <愤怒的 ...
- 【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具
示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...
- 一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(3) DOClever——你的postman有点low
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(4)shell.js——穿上马甲我照样认识你
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 一统江湖的大前端(7)React.js-从开发者到工程师
目录 一. 前端打怪升级指南 1.1 我应该从哪个框架开始学? 1.2 一次转职 1.3 二次转职 1.4 转职-其他 二. 为什么你应该学习React 2.1 技术栈的延伸 2.2 组件化开发 2. ...
- 一统江湖的大前端(10)——inversify.js控制反转
<大史住在大前端>前端技术博文集可在下列地址访问: [github总基地][博客园][华为云社区][掘金] 字节跳动幸福里大前端团队邀请各路高手前来玩耍,团队和谐有爱,技术硬核,字节范儿正 ...
随机推荐
- MySQL 中 having 和 where 的区别
区别一: where 是数据从磁盘读入内存时候一条一条判断的 having 是将所有数据读入内存,在分组统计前,根据having的条件再将不符合条件的数据删除 区别二: having 子句可以使用字段 ...
- js生成自定义随机数方法
function getRandom() { var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', ...
- 计算CPU的MIPS
如图: MIPS=主频/CPI*(10^6), 其中CPI的计算公式为CPI=总的时钟周期数/总的指令数 CPI=(0.5a*2+0.2a*3+0.1a*4+0.2a*5)/a=3
- python从入门到实践-8章函数
#!/user/bin/env python# -*- coding:utf-8 -*- # 给形参指定默认值时,等号两边不要有空格 def function_name("parameter ...
- 通用类 对象Excel互转
public class ExcelHelper { public void Demo(string filePath) { if (File.Exists(filePath)) File.Delet ...
- linux系统中的时间
1.编程显示系统时间: #include <stdio.h> #include <time.h> /* gcc -o fix fixedFormatTime.c ./fix * ...
- 简述一下MVC和MVVM
一. MVC 我们先来了解一下什么是MVC. MVC:分别所指Model.View.Controller. MVC为标准的设计模式,是官方推荐的权威的规范模式. 视图(View):用户交互界面. 控制 ...
- 【RL-TCPnet网络教程】第23章 RL-TCPnet之地址解析协议ARP
第23章 RL-TCPnet之地址解析协议ARP 本章节为大家讲解ARP(Address Resolution Protocol,地址解析协议),通过前面章节对TCP和UDP的学习,需要大家 ...
- emWin万年历,含uCOS-III和FreeRTOS两个版本
第8期:万年历配套例子:V6-914_STemWin提高篇实验_万年历(uCOS-III)V6-915_STemWin提高篇实验_万年历(FreeRTOS) 例程下载地址: http://forum. ...
- 基于docker搭建开源扫描器——伏羲
基于docker搭建开源扫描器——伏羲 1.简介 项目地址 伏羲是一款开源的安全检测工具,适用于中小型企业对企业内部进行安全检测和资产统计. 功能一览: 基于插件的漏洞扫描功能(类似于巡风) 漏洞管理 ...