Use impress.js to create slideshows_javascript tips-JS Tutorial-php.cn

Use impress.js to create slideshows_javascript tips

WBOY

Release： 2016-05-16 15:40:05

Original

1518 people have browsed it

Last week I saw a friend making a very cool zoom slideshow. Maybe because I didn’t know much about it, I took a long time to find several web slideshow tools. After filtering, I decided to use Geek’s impress.js.

impress.js is an emerging slideshow tool. Its effect is similar to Prezi, but it has 3D functions. It is open source under the MIT&GPL license. It is really good news for people with a certain foundation in web development! Just use some html commands and load impress.js to create a gorgeous zoom slideshow.

When making it, first you need to write some head, which is the same as ordinary Web, but the body is different. Since impress.js currently only supports modern browsers such as Chrome, Firefox and Safari (touch IE...), a fallback message is needed.

<body class="impress-not-supported">
<div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

Copy after login

Then start writing the real body, the impress part. This section must be completely enclosed within "< div id="impress" >".

The first slide is the step slide, which is very similar to an ordinary slide, just page by page. You can add it using the following method

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一页的幻灯片</q>
</div>

Copy after login

What you need to write is id, data-x and data-y. id is a name, and data-x and data-y are coordinates. In fact, impress.js gives you a big scene, and all you need is to throw the slides in and put them in the right place. It will then be displayed in the order you threw it. In fact, there is another coordinate, which is data-z. This coordinate can bring you into the 3D effect and zoom.

Another kind of slide is called step. Unlike the previous one which has a rigid frame, this kind of slide completely removes the frame that restricts you and writes directly on the background. Please look at the following example:

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻灯片由</span>
  <h1>impress.js</h1>
  <span>给你呈现</span>
</div>

Copy after login

The special thing here is that there is a data-scale, indicating the size of this slide. You can make a page very large or very small to provide a scaling contrast. There is also a rotation function:

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>这是一个 <strong>presentation tool</strong> <br/>
  作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/>
  利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

Copy after login

The data-rotate above represents the angle of rotation.

Finally, you can provide a hint to tell the user that they need to use the keyboard's arrow keys to control the entire playback process. If the user just clicks on the slide and there is no response, this prompt will automatically appear.

<div class="hint">
  <p>请用方向键控制</p>
</div>

Copy after login

At the end of the page, you need to load impress.js. I am directly quoting the author's page here, but if it is an offline display, it is recommended to download it and use it. Simply loading js is not enough, you also need to use impress().init() to start it.

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

Copy after login

In fact, this tool has many functions, I just learned some of the most basic functions. The suggestion on the official website is to directly look at the index.html provided by it. There are detailed comments in it to tell you what functions it has. I made a page and modified it from the index.html provided by the author. Although these things are very simple, they are good enough for making slides for a speech. The page I created is placed on Gist, and the overall code can be found at the end of this page.

Of course, similar tools cannot but mention Prezi, which is the initial implementation of this idea, but it is said that it does not support Chinese. Domestic Tencent AlloyTeam has also developed a tool called iPresst, which can be said to be a good tool for fools, but because it is a social network, it is a bit private. The biggest flaw of impress.js is that it is too geeky. If there is a WYSIWYG development tool, it will definitely be popularized.




 
 
 
 impress.js 尝试
  
 




 Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
 For the best experience please use the latest Chrome, Safari or Firefox browser.



 
  第一页的幻灯片：
是否尝试过这样幻灯？
  这种幻灯片最初由Prezi带给世界
 
 
  这种幻灯片通过ZUI的方式，彻底摆脱了传统幻灯片的“盒子限制”
  唯一限制你的是你的创意！
 
 
  后面还有更多惊喜！
 
 
  你看到的幻灯片由
  impress.js
  给你呈现
 
 
  这是一个 presentation tool 

  作者从 prezi.com 得到灵感

  利用现代浏览器CSS3 transforms and transitions的力量
 
 
  将你的想法视觉化
 
 
  请看impress.js
  

  开放的幻灯工具
 
 
 



 请用方向键控制


<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

Copy after login

The above content is what I share with you about using impress.js to create slideshows. The code is very simple. I hope it will be helpful to everyone.