-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
impress.js 使用心得 #41
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
impress.js 使用心得
背景
因为是前端,所以啥玩意儿都喜欢做成前端的样子,ppt也不例外;其实不只是ppt,对于产品介绍,现在很多也做成ppt或者video的形式。
之前我用的比较多的是jinjiang的 vue-mark-display,主要是因为md格式支持的比较好。但直到用了impress.js以后发现,这里能做的可就更多了。而现在市面上有的impress.js的介绍并不多。
impress.js介绍
先上案例 impress.js官网
如果有兴趣还可以看下官方引入的其他例子
以及别人使用被官方引入到awesome的例子
还有现任作者henrikingo的一些外出演讲ppt,这位好像是mongodb的核心开发人员;
ok 现在是不是对这个impress.js有点兴趣了,我们先来关注一波原理
原理介绍
impress.js的框架原理并不复杂,写在html标签上的属性可以通过 document.querySelector('元素名').dataset["属性名"]的方式取得其值,然后将每一张幻灯片相关的值赋值给CSS3D相关的属性,并为其设定过渡时的渐变动画即可。
其实是很简单的实现,那么该如何用好呢?
进阶入门
impress.js官网其实包含了几乎所有的demo;而它背后的index.html中的注释,已经把设计说明的很详细了;
特别是这个
但不太友好的是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 是一个利用js实现非网页领域的神器。
相关文献
The text was updated successfully, but these errors were encountered: