• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > impress.js表现层框架(演示工具)-初体验

impress.js表现层框架(演示工具)-初体验

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含impress,impress用法,演示工具等相关知识,佚名 希望在学习及工作中可以帮助到您
博客一歇就是半年,略惭愧...元旦假期各种惬意:打打Dota(悲催的输多赢少)、滑滑雪;吃吃东西、逛逛街。转眼儿今天就得上班了,5点早早起床(最近坚持早睡早起),忍不住分享下前段时间发现的前端工程师装X的利器,所以这新年第一篇博文诞生了:)
你希望别人看到你的演示文稿会发出“wow”吗?你希望使用华丽的效果来震惊你的观众吗? 那咱们往下看
------------------正文分割线------------------
概述
如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错。装X是需要一定代价的,不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题,看看这篇文章 + 一点点实践(把官网上的例子拿来改改)即可...
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。
目前 impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。
impreess源码已经发布在GitHub上,地址:https://github.com/bartaz/impress.js
官方demo地址:http://bartaz.github.com/impress.js
因为在其项目网页中却没有找到说明文档&使用文档,所以这篇文章将一步一步创建一个较初级的演示文稿,我们接着往下走。
请准备好现代浏览器:Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持,不知道为什么很多资料上写着IE10也能支持,背了个催。

配置
html5页面结构先准备就绪
创建一个id="impress"的wrapper(载体),直接div就好,其他标签同样也可以
在body标签结束前引入impress.js文件并且调用
class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息,降级处理你懂的,不多解释哈

impress在视觉表现上确实非常强大,比起同样做演示文稿的 html5slides 和 deck.js, impress.js的复杂度上高了不少,而且如果想把演示文稿

您可能想查找下面的文章:

  • impress.js表现层框架(演示工具)-初体验

相关文章

  • 2017-08-06对于大流量网站的解决方案
  • 2018-08-23为了拖尾款,甲方竟然要当我的男朋友…
  • 2018-08-23Airbnb设计副总裁:设计的困境与出路
  • 2018-08-23春节专题!App 设计系列之应用市场截图设计原则
  • 2017-08-06我们能从Google的全新UI中学到的知识(图文)
  • 2018-08-23接地气!设计师和需求方高效沟通的5种技巧
  • 2018-08-23在这些因素的制约之下,才能选取出科学的配色方案
  • 2018-08-23如何点出枝繁叶茂的技能树?专访Graphiq 设计主管张冰昕
  • 2017-08-06flash 嵌入网页 与IE, FF,傲游兼容问题
  • 2017-08-06手机浏览器不支持position: fix的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 进阶好文!让人舒服的的交互设计稿该有的5个特点
    • 水彩自学第三集:水彩笔常见问题及测评
    • 实用全面!教你用Sketch Libraries构建组件库/设计体系
    • 设计出了错?很有可能是你没有问对问题
    • UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
    • 这10种色彩,是潘通预测的2017年秋冬两季流行色
    • 实在干货!为老年用户做体验设计应该注意的6个细节
    • element.style内联样式的修改方法教程
    • 插图式的网站主页设计 网站设计新的趋势
    • 天猫设计师:互联网职场“向上管理”的4个心得

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有