Of Stack

Use impress.js to make slides

  • 2020-08-22 21:46:16
  • OfStack

Last week I saw a friend make a gorgeous zooming slide show. Maybe because I didn't know much about it, I searched for a long time to find some web slide show tools. impress.js by screening for Geek.

impress.js is an emerging slideshow tool that looks similar to Prezi but has 3D functionality and is based on MIT & Open source under GPL, good news for those who have a solid Web development foundation! Simply use 1 html command and load impress.js to create a gorgeous zoom slide.

To make head, you first need to write 1 head, which is the same as the regular Web, but body is different. Since impress. js currently only supports modern browsers like Chrome, Firefox and Safari (touch IE...) , so 1 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>

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

The first slide is step slide, which is very similar to a regular slide, it's page by page. You can add it in the following way 


<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q> The first 1 Slide of the page </q>
</div>

What you need to write is id, ES47en-ES48en and ES49en-ES50en. id is a name, and ES52en-ES53en and ES54en-ES55en are coordinates. In fact, impress.js is giving you a very large scene, and all you need is to throw a slide in and put it in the right place. And then it will be displayed in the order that you throw it. There's actually one more coordinate, data-ES59en, which takes you into the 3D effect and scales it.

Another type of slide is called step. Instead of having a rigid box like the first one, this slide completely eliminates the box that restricts you and writes directly in the background. Here's an example: 


<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span> You see the slide by </span>
  <h1>impress.js</h1>
  <span> Give you a present </span>
</div>

What's special here is that there's 1 ES68en-ES69en, which is the size of the slide, and you can make a page very large or very small to provide a zoom 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> This is a 1 a  <strong>presentation tool</strong> <br/>
   The author from the  <a href="http://prezi.com">prezi.com</a>  Inspired by <br/>
   Take advantage of modern browsers <strong>CSS3 transforms and transitions</strong> The power of </p>
</div>

data-rotate above is the Angle of rotation.

Finally, you can provide an hint that tells the user to use the keyboard's arrow keys to control the playback. If the user just clicked on the slide and didn't respond, the prompt would automatically appear. 


<div class="hint">
  <p> Please use arrow keys to control </p>
</div>

At the end of the page, you'll need to load impress.js. I'm referring directly to the author's page here, but if it's an offline presentation, I recommend downloading it and using it. Simply loading js is not enough; you also need to boot with impress().init (). 


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

In fact, there are many more functions of this tool. I have only learned a few basic functions. The advice on the official website is to look directly at the index.html provided by him. There are detailed notes in it to tell you what functions it has. I made a page, which is also modified from the index.html provided by the author. Although these things are very simple, it is good enough to do a powerpoint presentation. The page I created is on Gist. See the whole code at the end of this page.

Of course, Prezi is a similar tool, which was the original implementation of the idea, but reportedly does not support Chinese. Domestic Tencent AlloyTeam also developed a tool called iPresst, can be said to be a fool of a good thing, but because of the social network style, a little too private. The biggest drawback to impress is that it is too Geek, and if you had a wySIWYG development tool, 1 would definitely spread. 


<!doctype html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=1024" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <title>impress.js  try </title>
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
 <link href="http://bartaz.github.io/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<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>

<div id="impress">
 <div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q> The first 1 Slide of page: <br/> Have you tried this before <b> slide </b> ? </q>
  <q> This slide was originally created by Prezi To the world </q>
 </div>
 <div class="step slide" data-x="0" data-y="-1500">
  <q> This slide goes through ZUI "In a way that completely gets rid of the traditional" box limit "of slides. </q>
  <q><strong> only 1 Your creativity is what limits you! </strong></q>
 </div>
 <div class="step slide" data-x="1000" data-y="-1500">
  <q> There is something <font color="red"><strong> More surprises! </strong></font></q>
 </div>
 <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span> You see the slide by </span>
  <h1>impress.js</h1>
  <span> Give you a present </span>
 </div>
 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p> This is a 1 a  <strong>presentation tool</strong> <br/>
   The author from the  <a href="http://prezi.com">prezi.com</a>  Inspired by <br/>
   Take advantage of modern browsers <strong>CSS3 transforms and transitions</strong> The power of </p>
 </div>
 <div id="big" class="step" data-x="4000" data-y="2100" data-rotate="180" data-scale="6">
  <p> Visualize your thoughts </p>
 </div>
 <div id="end" class="step" data-x="7000" data-y="2500" data-rotate="90" data-scale="6">
  <p> Please have a look at <a href="http://bartaz.github.io/impress.js"><b>impress.js</b></a>
  <br/>
   Open slide tool </p>
 </div>
 <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
 </div>
</div>

<div class="hint">
 <p> Please use arrow keys to control </p>
</div>

<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p> Please use arrow keys to control </p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

The above content is the use of ES105en. js slides I share, the code is very simple, I hope to help you learn.

Related articles: