If you are tired of using PPT to set paths, set time, and set animations way to create animation special effects, then Impress.js will be a very good choice for you.
The PPT made with it will be more intuitive and the effect will be beautiful.
Of course, if you use it to install X, you need to pay some price, but if you are a front-end enthusiast and understand HTML/CSS, then there will be no problem.
Look at the examples on the Internet, practice by yourself, and you can get started in minutes.
impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。 现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。 目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。
The mobile phone may not be able to view it temporarily because it uses the direction keys (←/→) or the Tab key to switch playback.
You can download the source code of Impress.js from the download address below, which comes with the effect demo from the official website.
If you need the example I did above, the message mailbox is OK.
OK, everything is ready, let’s start.
If you follow it step by step, you will understand how to use impress.js in seconds.
The code is as follows:
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh"> 4 <meta charset="UTF-8"> 5 <title>Impress.js Demo - 孤影</title> 6 </head> 7 <body> 8 <div class="impress-not-supported"></div> 9 10 <div id="impress"></div>11 12 <script type="text/javascript" src="impress.js"></script>13 </body>14 </html>
Now we are going to create the steps for each switch.
Just create the divs of these steps to be switched in the div with the id of impress. The class of the div is "step".
The id of the div is optional. If there is no id, it will be executed step by step in the default order of steps from top to bottom. The access address is such as: "http://.../demo.html #/step-1". Otherwise, it will be executed in the order of your customized ids.
The position and size of each slide, switching effect and other attributes are as follows:
OK, after understanding these attributes, we start to create the following code. I will use lyrics here for the slide content:
1. After citing the impress.js code, we need to use it To initialize the page and produce the effect we will create later, the code is as follows:
<1-- 引入impress.js --><script type="text/javascript" src="impress.js"></script><script type="text/javascript"> impress().init(); // 初始化幻灯片的step</script>
2. Create the first initial slide, his data -x and data-y are both set to 0, so it will appear in the middle of the page:
<div class="step" data-x="0" data-y="0"> <h3>《Poker Face》</h3> - Lady Gaga</div>
3. We create the second slide , its data-x is 500 and data-y is still 0, so when switching to the second one, it will pan right to switch to this slide:
<div class="step" data-x="500" data-y="0"> I wanna hold them like they do in Texas Plays.</div>
4. Create the third slide below. Its data-x is still 500 and data-y is -400, so it will move up 400px and switch to this:
<div class="step" data-x="500" data-y="-400"> Fold them let them hit me raise it Baby stay with me.</div>
4. Does the panning effect feel uninteresting? Let’s do some tricks on our fourth slide:
Use data-scale to control the zoom size. Here I set it to 0.5, which means the zoom is half of the original size; data-x is still 500, data- y is -800.
represents moving up 400px and scaling to half the size. The code is as follows:
<div class="step" data-x="500" data-y="-800" data-scale="0.5"> (I love it.)</div>
5. We use the fifth slide data-rotate attribute to set its rotation animation.
Here, I set the current data-x to 0, data-y to still be -800, and data-rotate to 90.
表示，它将会安装旋转90°的动画，想左翻转500px，显示当前幻灯片，代码如下：
<div class="step" data-x="0" data-y="-800" data-rotate="90"> Love game intuition play the cards with Spades to start.</div>
6.下面来点儿终极的，设置data-x为-1200，data-y为0，表示当前幻灯片相对于前一张向左1200px向下800px。
然后分别使用data-rotate-x、data-rotate-y、data-rotate-z设置旋转角度，并且使用data-scale设置缩放比例为放大4倍。
代码如下：
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> And after he's been hooked I'll play the on that's on his heart.</div>
7.现在你已经可以打开浏览器运行代码了，是不是感觉效果相当霸气。
当然，界面可能有点丑，你可以按照个人喜好写点样式。如果懒得写的话，也可以使用下面我简单些的几个样式：
<style type="text/css"> body{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 class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>
本实例所有代码如下：
1 2 3 4 5Impress.js Demo - 孤影 6 12 13 14 15 161727 28 29 32 3318《Poker Face》
- Lady GagaI wanna hold them like they do in Texas Plays.19Fold them let them hit me raise it Baby stay with me..20(I love it.)21Love game intuition play the cards with Spades to start.2223 And after he's been hooked I'll play the on that's on his heart.2425 <div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>26
如果还需要再看看开头我做的那个演示实例的话，留言邮箱吧。
当你制作出这么一个简单的演示文稿后，你应该记住，使用它制作出的效果如何，你的想象和创造力是唯一决定性的因素！
正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。 优点：
缺点：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
