impress.js 使用心得

[xxholly32]

impress.js 使用心得

背景

因为是前端，所以啥玩意儿都喜欢做成前端的样子，ppt也不例外；其实不只是ppt，对于产品介绍，现在很多也做成ppt或者video的形式。

我个人还是蛮喜欢语雀的介绍视频的

之前我用的比较多的是jinjiang的 vue-mark-display，主要是因为md格式支持的比较好。但直到用了impress.js以后发现，这里能做的可就更多了。而现在市面上有的impress.js的介绍并不多。

如果你喜欢用powerpoint，或者其他领域的工具制作ppt，那么下面的文章可能不适合你

impress.js介绍

先上案例 impress.js官网

很难想象这是个8年前的idea

如果有兴趣还可以看下官方引入的其他例子

以及别人使用被官方引入到awesome的例子

还有现任作者henrikingo的一些外出演讲ppt，这位好像是mongodb的核心开发人员；

ok 现在是不是对这个impress.js有点兴趣了，我们先来关注一波原理

原理介绍

impress.js的框架原理并不复杂，写在html标签上的属性可以通过 document.querySelector('元素名').dataset["属性名"]的方式取得其值，然后将每一张幻灯片相关的值赋值给CSS3D相关的属性，并为其设定过渡时的渐变动画即可。

CSS3D是指transition渐变，animation动画以及transform变形。

有时候人们很喜欢造一些名字很吓人的名词，让人一听这个名词就觉得自己不可能学会，从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。

其实是很简单的实现，那么该如何用好呢？

进阶入门

impress.js官网其实包含了几乎所有的demo；而它背后的index.html中的注释，已经把设计说明的很详细了；

特别是这个

<!--
    Welcome to the light side of the source, young padawan.
    One step closer to learn something interesting you are...
                               ____                  
                            _.' :  `._               
                        .-.'`.  ;   .'`.-.           
               __      / : ___\ ;  /___ ; \      __  
             ,'_ ""=-.:__;".-.";: :".-.":__;.-="" _`,
             :' `.t""=-.. '<@.`;_  ',@:` ..-=""j.' `;
                  `:-.._J '-.-'L__ `-.-' L_..-;'     
                    "-.__ ;  .-"  "-.  : __.-"       
                        L ' /.======.\ ' J           
                         "-.   "__"   .-"            
                        __.l"-:_JL_;-";.__           
                     .-j/'.;  ;""""  / .'\"-.        
                   .' /:`. "-.:     .-" .';  `.      
                .-"  / ;  "-. "-..-" .-"  :    "-.   
             .+"-.  : :      "-.__.-"      ;-._   \  
             ; \  `.; ;                    : : "+. ; 
             :  ;   ; ;                    : ;  : \: 
             ;  :   ; :                    ;:   ;  : 
            : \  ;  :  ;                  : ;  /  :: 
            ;  ; :   ; :                  ;   :   ;: 
            :  :  ;  :  ;                : :  ;  : ; 
            ;\    :   ; :                ; ;     ; ; 
            : `."-;   :  ;              :  ;    /  ; 
             ;    -:   ; :              ;  : .-"   : 
             :\     \  :  ;            : \.-"      : 
              ;`.    \  ; :            ;.'_..-=  / ; 
              :  "-.  "-:  ;          :/."      .'  :
               \         \ :          ;/  __        :
                \       .-`.\        /t-""  ":-+.   :
                 `.  .-"    `l    __/ /`. :  ; ; \  ;
                   \   .-" .-"-.-"  .' .'j \  /   ;/ 
                    \ / .-"   /.     .'.' ;_:'    ;  
                     :-""-.`./-.'     /    `.___.'   
                           \ `t  ._  /               
                            "-.t-._:'                
-->

但不太友好的是impress.js是umd模式的，我把他引入到vue-cli中，顺便做了一个翻译工作，预览地址 https://xxholly32.github.io/impress-demo/以及项目地址 https://github.com/xxholly32/impress-demo

当然，你也可以直接学习其中 impressDemo.vue中的源码部分；这个很重要，学会了才能够更好使用impress.js

还有更好的 gossip

一个高效创建和演示炫酷幻灯片的用户界面！ 🔥 https://pearmini.github.io/gossip/

比较有趣的是它的产品介绍：

《人类简史》中有一个观点，人类之所以强于其他动物就是因为人类会讲故事：故事让我们能相信陌生人，从而能有效地大规模合作。PPT 不失为一种好的讲故事的方式，而 Gossip（八卦）是一种我们随时随地都在、也是人们最喜欢讲的故事，所以我将该软件取名为 Gossip，旨在打造一个通过 PPT 高效编故事、讲故事的工具。

它的内容也是比较详细可以看对应的文档，使用起来会比impress.js要方便的多；如果不了解前端，不想写代码可以尝试gossip

还需要什么

想象力

TODO

• 拆解impress.js更方便引入与二次开发

总结

impress.js 是一个利用js实现非网页领域的神器。

相关文献

• 一统江湖的大前端——PPT制作库impress.js
• 高逼格的在线演讲稿编辑器