对单位网站建设的意见,wordpress+上传权限设置,php网站建设教程 电子书,数字广东网络建设有限公司电话前言#xff1a; 如果你已经厌倦了使用PPT设置路径、设置时间、设置动画方式来制作动画特效、那么Impress.js将是你一个非常好的选择。 用它制作的PPT将更加直观、效果也是嗷嗷美观的。 当然#xff0c;如果用它来装X#xff0c;是需要付出一些代价的#xff0c;不过如果你… 前言 如果你已经厌倦了使用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 的浏览器也能正常运行。 演示 官网展示效果http://bartaz.github.io/impress.js/#/overview本人制作的第一个示例http://guyingsoft.com/gyPage/About/index.html 手机暂时可能看不了因为它是使用方向键(←/→)或Tab键切换播放的。 从下面的下载地址即可下载Impress.js的源码里面附带了官网的效果Demo。 如果需要上面我做的那个例子留言邮箱就OK了。 准备 Impress.js的源码已经发布在了GitHub上下载即可https://github.com/bartaz/impress.js。浏览器Chrome、Safari、FireFox、IE10(有的人说不行不知道为什么)。代码编辑器(在这里我用的是WebStorm)。 OK、一切准备就绪开搞、 大家一步一步跟着写impress.js怎么用就会秒懂了。 步骤一 新建一个HTML页面在/body结束之前引入上面下载的impress.js在body中创建两个div第一个class为“impress-not-supported”表示不支持是的提示信息你懂的另一个的id为“impress”表示幻灯片的容器。注意这里是id我刚玩的时候就写成了class结果impress一直报错找不到监听等错误信息。 代码如下 1 !DOCTYPE html2 html3 head langzh4 meta charsetUTF-85 titleImpress.js Demo - 孤影/title6 /head7 body8 div classimpress-not-supported/div9
10 div idimpress/div
11
12 script typetext/javascript srcimpress.js/script
13 /body
14 /html 步骤二 现在我们就要来创建每一个切换的步骤了。 在id为impress的div中创建这些要切换的步骤的div即可div的class为“step”。 div的id可有可无如果没有id则会按照默认从上向下的step的顺序一步步执行访问地址如“http://.../demo.html#/step-1”。反之将会按照你自定义的id顺序执行。 每个幻灯片显示的位置和大小、切换的效果等属性如下 data-x幻灯片的X坐标data-y幻灯片的Y坐标data-scale幻灯片显示的缩放比例data-rotate幻灯片旋转的度数data-rotate-x为3D使用这个度数设置它相对X轴旋转多少度。data-rotate-y为3D使用这个度数设置它相对Y轴旋转多少度。data-rotate-z为3D使用这个度数设置它性对Z轴旋转多少度。 OK、了解了这些属性之后我们开始创建如下代码幻灯片内容在这里我就用歌词了 1.引用impress.js代码之后我们需要使用它来初始化页面产生后面我们将要制作的效果代码如下 1-- 引入impress.js --script typetext/javascript srcimpress.js/script
script typetext/javascriptimpress().init(); // 初始化幻灯片的step
/script 2.创建第一个初始的幻灯片他的data-x和data-y都设置为0所以它会出现在页面的中间 div classstep data-x0 data-y0h3《Poker Face》/h3 - Lady Gaga
/div 3.我们创建第二个幻灯片它的data-x为500data-y依旧为0所以切换到第二的时候它会向右平移切换到这个幻灯片 div classstep data-x500 data-y0I wanna hold them like they do in Texas Plays.
/div 4.下面创建第三个幻灯片它的data-x依旧为500data-y为-400所以它会向上平移400px切换至此 div classstep data-x500 data-y-400Fold them let them hit me raise it Baby stay with me.
/div 4.平移的效果是不是感觉没什么意思下面我们第四张幻灯片来点儿花样 使用data-scale控制缩放的大小在这里我设置为0.5表示缩放为原大小的一半data-x依旧500data-y为-800。 表示向上移动400px并且缩放一半的大小代码如下 div classstep data-x500 data-y-800 data-scale0.5(I love it.)
/div 5.第五张幻灯片我们使用data-rotate属性来设置它的旋转动画。 在这里我设置当前的data-x为0、data-y依旧是-800data-rotate为90。 表示它将会安装旋转90°的动画想左翻转500px显示当前幻灯片代码如下 div classstep data-x0 data-y-800 data-rotate90Love game intuition play the cards with Spades to start.
/div 6.下面来点儿终极的设置data-x为-1200data-y为0表示当前幻灯片相对于前一张向左1200px向下800px。 然后分别使用data-rotate-x、data-rotate-y、data-rotate-z设置旋转角度并且使用data-scale设置缩放比例为放大4倍。 代码如下 div classstep data-x-1200 data-y0 data-rotate-x30 data-rotate-y-30 data-rotate-z90 data-scale4And after hes been hooked Ill play the on thats on his heart.
/div 7.现在你已经可以打开浏览器运行代码了是不是感觉效果相当霸气。 当然界面可能有点丑你可以按照个人喜好写点样式。如果懒得写的话也可以使用下面我简单些的几个样式 style typetext/cssbody{margin:0px; background:#000000; color:#00FF66; font-size: 20px;}div.step h3{display: inline-block;}div.step{ width:400px; height: 100px; padding-top: 50px; text-align: center; border:1px solid #00FF66; box-shadow: 0px 0px 10px #00FF66; border-radius: 20px; }div#overview{border:0px; box-shadow:0px 0px 0px transparent; }/style OK、通过以上7个小步骤我们就已经完成了一张简单粗暴的演示文稿了。 你也就可以发挥自己独特的想象力来动手制作一个吓尿一片人的Web演示文稿的展示效果了。 附注 这里还有一个全局预览的效果就是把所有step块的的内容全部放在一个平面显示效果超赞。 在这里我在所有step后面创建一个id为overview的div作为整体预览的展示块展示缩放大小为放大3倍x和y的位置如下等代码如下 div classstep idoverview data-x-200 data-y-500 data-scale3/div 结尾 本实例所有代码如下 1 !DOCTYPE html2 html3 head langzh4 meta charsetUTF-85 titleImpress.js Demo - 孤影/title6 style typetext/css7 body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;}8 div.step h3{display: inline-block;}9 div.step{width:400px; height: 100px; padding-top: 50px; text-align: center; border:1px solid #00FF66; box-shadow: 0px 0px 10px #00FF66; border-radius: 20px;}
10 div#overview{border:0px; box-shadow:0px 0px 0px transparent; }
11 /style
12 /head
13 body
14 div classimpress-not-supported/div
15
16 div idimpress
17 div classstep data-x0 data-y0h3《Poker Face》/h3 - Lady Gaga/div
18 div classstep data-x500 data-y0I wanna hold them like they do in Texas Plays./div
19 div classstep data-x500 data-y-400Fold them let them hit me raise it Baby stay with me../div
20 div classstep data-x500 data-y-800 data-scale0.5(I love it.)/div
21 div classstep data-x0 data-y-800 data-rotate90Love game intuition play the cards with Spades to start./div
22 div classstep data-x-1200 data-y0 data-rotate-x30 data-rotate-y-30 data-rotate-z90 data-scale4
23 And after hes been hooked Ill play the on thats on his heart.
24 /div
25 div classstep idoverview data-x-200 data-y-500 data-scale3/div
26 /div
27
28 script typetext/javascript srcimpress.js/script
29 script typetext/javascript
30 impress().init();
31 /script
32 /body
33 /html 本实例完整代码 如果还需要再看看开头我做的那个演示实例的话留言邮箱吧。 当你制作出这么一个简单的演示文稿后你应该记住使用它制作出的效果如何你的想象和创造力是唯一决定性的因素 体会 正因为我们是前端所以用前端技术做做各种尝试没什么不好impress更可以让我们的演示文稿更有新意所以简单了解下绝对是值得的学习是最好的投资。 优点 个人非常喜欢overview的功能因为HTMLCSS都需要自己完成位置和效果都得自己经手视觉效果都由自己掌控在我用过的同类产品中视觉效果最绚CSS33D效果直接给观众看晕:) 缺点 impress在视觉表现上确实非常强大比起同样做演示文稿的 html5slides 和 deck.js impress.js的复杂度上高了不少而且如果想把演示文稿排版的好看可能需要花掉大量的时间.*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料视觉效果会稍差一些不过上手会简单不少。不要把3D和旋转用得太花哨、太绚看的人会晕恰当就好哈 转载于:https://www.cnblogs.com/geeksss/p/4338671.html
