zoukankan      html  css  js  c++  java
  • 【华为云技术分享】【一统江湖的大前端】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变形。

    作者:华为云享专家 大史不说话

  • 相关阅读:
    POJ3094 UVALive3594 HDU2734 ZOJ2812 Quicksum【进制】
    UVALive5583 UVA562 Dividing coins
    POJ1979 HDU1312 Red and Black【DFS】
    POJ1979 HDU1312 Red and Black【DFS】
    POJ2386 Lake Counting【DFS】
    POJ2386 Lake Counting【DFS】
    HDU4394 Digital Square
    HDU4394 Digital Square
    UVA213 UVALive5152 Message Decoding
    UVA213 UVALive5152 Message Decoding
  • 原文地址:https://www.cnblogs.com/2020-zhy-jzoj/p/13165043.html
Copyright © 2011-2022 走看看