【译】Impress.js制作酷炫Presentation PPT

kviccn 发布于2019-08-21 10:30 / 2061人阅读

摘要：由于是线上发布，所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。需求为了看到效果，请使用目前并不兼容早期的版本。第四张幻灯片来个新花样，使用的值控制其缩放大小。

可以先看一个demo：http://dwqs.github.io/resume

昨天，我写了一些关于Impress.js的东西，对于创建在线的自我展示，这是一个非常不错的JavaScript库。由于是线上发布，所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。这一篇文章将帮助你开始创建一个简单的幻灯片，但是之后你一定要完成它，可以用它来做很多酷炫的效果，唯一限制你的就是你的创造力。

需求

为了看到效果，请使用Google Chrome or Safari (or Firefox 10 or IE10).Impress.js目前并不兼容早期的Firefox or Internet Explorer版本。

创建

首先，要创建一个Web页面。我创建的页面如下：

 
     
         
Impress Tutorial

在之前添加impress.js文件，将Impress.js导入到你的项目中

接下来创建一个id是impress的div容器包裹这个幻灯片，

创建幻灯片

在个人展示中，你将看到创建一个幻灯片是如此的简单。每个幻灯片是一个class为step的div元素（被包裹在id是impress的容器内）

(ps:div的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如)

 
   My first slide

创建幻灯片的同时，要添加一些数据属性。下面是一些可用的数据属性：

data-x = 幻灯片的x坐标

data-y = 幻灯片的y坐标

data-z = 幻灯片的z坐标

data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍

data-rotate = 通过一个数字度数来确定旋转你的幻灯片

data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）

data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）

data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。

让数据属性起作用

接下来的幻灯片设置将引导你理解每一个数据属性

从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。

 
    This is my first slide （显示的内容）

第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。


    This is slide 2

    第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。

    This is slide 3

第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale=”0.5″表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步


    This is slide 4

第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转90度，视觉效果微叼哈


    This is slide 5

第六张幻灯片开始3D style，可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。


This is slide 7 and it has a 3D transition AND a scale.

对于不支持Impress.js的浏览器做降级处理
在

div id=”impress”>之前添加如下一个div

  
        Your browser doesn"t support impress.js. Try Chrome or Safari.

然后将下列样式添加到你的样式表中：

.no-support-message { display:none; } 
.impress-not-supported .no-support-message { display:block; }

impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js

官方demo地址：http://bartaz.github.com/impress.js

译文出处：http://www.ido321.com/1513.html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85649.html

每周前端开源推荐第二期

摘要：每周前端开源推荐第二期是一个可自行部署的，类似我的忍不住发了个广告捂脸后端即服务是将后端的一些逻辑抽样出来变成一种服务，以便多平台共同使用。每周前端开源推荐第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

Crazy_Coder 2019-08-28 17:51 评论0 收藏0
每周前端开源推荐第二期

摘要：每周前端开源推荐第二期是一个可自行部署的，类似我的忍不住发了个广告捂脸后端即服务是将后端的一些逻辑抽样出来变成一种服务，以便多平台共同使用。每周前端开源推荐第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

szysky 2019-08-19 14:21 评论0 收藏0
每周前端开源推荐第二期

摘要：每周前端开源推荐第二期是一个可自行部署的，类似我的忍不住发了个广告捂脸后端即服务是将后端的一些逻辑抽样出来变成一种服务，以便多平台共同使用。每周前端开源推荐第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

hoohack 2019-08-01 14:36 评论0 收藏0
用impress.js制作幻灯片

摘要：前两天学长回学校进行洗脑宣讲，做了一个看上去很炫的缩放式幻灯片。可以用如下的方法添加第一页的幻灯片你需要写的是和。如果用户刚点开幻灯片而没反应，这个提示会自动浮现。虽然这些东西很简单，但做一个演讲使用的幻灯片，也已经足够好了。前两天学长回学校进行洗脑宣讲，做了一个看上去很炫的缩放式幻灯片。我不知道是不是太浅薄了，找了很久才找到几个Web幻灯片工具。看了几个之后，我决定学习一下其中最G...

noONE 2019-08-21 12:15 评论0 收藏0
impress.js 源码分析

摘要：从源码的起就是主函数和大，主函数我们可以再看它先引入然后调用这个函数那么我们接下来重点来研究这个函数初始值第一步我们简历来支持手机设备是一个函数，本人觉得就是借鉴了的源码。前言之前做简历用到了impress.js，就像网页版的preiz，简直酷炫！贴上我的简历地址：可是没想到昨天师兄内推我说需要看懂impress.js源码，这样才能体现你学习钻研的精神。orz。。真是挖个坑坑把自...

ThinkSNS 2019-08-21 10:36 评论0 收藏0