DuangDuangDuang,一直策划着做一系列的前端炫酷特效推荐,本来之前准备做了的,准备推荐个js仿AE特效音乐播放器的特效。结果,找书签找了半天,没了??百度也检索不到@(内伤)。痛不欲生一蹶不振一直缓到今天才重新开始做第一个特效系列的推荐。

介绍


开始进入正题,impress.js它是一个基于CSS3转换和现代浏览器转换功能的演示框架,灵感来自于prezi.com背后的理念。使用了现代浏览器里支持的CSS3 transforms 和 transitions功能。在无限的画布上通过定位,旋转,缩放和3D效果把它们表现出来。支持最新的 Chrome, Safari 或者 Firefox 浏览器,不支持IE、Opera。使用Chrome效果最佳。

浏览快捷键

  • 上一页 pg up left up
  • 下一页 tab space pg down right down

在线演示(需要PC端打开,暂不支持手机端)impress.js.org

官方github仓库github.com/impress/impress.js

使用教程

官方教程github.com/impress/impress.js/blob/master/DOCUMENTATION.md
参照视频:

或参照视频demo代码(关注公众号回复demo012获取下载链接)

以及博主自制页面hojun.cn/about_hojun.html
参照视频:

工具

电脑端编辑工具Impressionist(不推荐小白使用)github.com/henrikingo/impressionist
Impressionist是一个原型和概念,用于构建一个用于创建impress.js演示文稿的视觉(wysiwyg)编辑器 。我们的想法是使用Electron将基于浏览器的impress.js演示文稿制作成可以打开和保存文件的适当桌面应用程序。 集成TinyMCE以提供编辑功能。当前状态是您可以打开演示文稿(例如模板/下的演示文稿 ),然后移动,添加或删除幻灯片并使用TinyMCE编辑其内容。您无法真正修改幻灯片的样式,也不能使用不同类型的幻灯片。为此,您仍然需要编辑原始CSS和HTML。

在线可视化编辑impress.js网站strut.io
来到其官网,点击get started即可开始在线编辑:

致谢

菜鸟教程
impress.js

有时间感兴趣的小伙伴可以去尝试下哈~

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦