Utilisez impressionner.js pour créer des astuces slideshows

Utilisez impressionner.js pour créer des astuces slideshows_javascript

WBOY

Libérer： 2016-05-16 15:40:05

original

1491 Les gens l'ont consulté

La semaine dernière, j'ai vu un ami créer un diaporama zoom très sympa. Peut-être parce que je n'y connaissais pas grand-chose, j'ai mis beaucoup de temps à trouver plusieurs outils de diaporama Web. Après filtrage, j'ai décidé d'utiliser Impress.js de Geek.

impress.js est un outil de diaporama émergent. Son effet est similaire à Prezi, mais il a des fonctions 3D. C'est vraiment une bonne nouvelle pour les personnes ayant une certaine base en développement web ! Utilisez simplement quelques commandes HTML et chargez impression.js pour créer un magnifique diaporama zoom.

Lors de sa création, vous devez d'abord écrire un en-tête, qui est le même que celui du Web ordinaire, mais le corps est différent. Étant donné qu'impress.js ne prend actuellement en charge que les navigateurs modernes tels que Chrome, Firefox et Safari (touchez IE...), un message de secours est nécessaire.

<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>

Copier après la connexion

Ensuite, commencez à écrire le corps réel, la partie impressionner. Cette section doit être entièrement entourée de "< div id="impress" >".

La première diapositive est la diapositive étape par étape, qui est très similaire à une diapositive ordinaire, page par page. Vous pouvez l'ajouter en utilisant la méthode suivante

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

Copier après la connexion

Ce que vous devez écrire est id, data-x et data-y. id est un nom et data-x et data-y sont des coordonnées. En fait, impressionner.js vous offre une grande scène, et tout ce dont vous avez besoin est d'y lancer les diapositives et de les placer au bon endroit. Il sera ensuite affiché dans l'ordre dans lequel vous l'avez lancé. En fait, il existe une autre coordonnée, qui est data-z. Cette coordonnée peut vous amener dans l'effet 3D et zoomer.

Un autre type de slide est appelé step. Contrairement au précédent qui avait un cadre rigide, ce genre de slide supprime complètement le cadre qui vous restreint et écrit directement sur le fond. Veuillez regarder l'exemple suivant :

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

Copier après la connexion

La particularité ici est qu'il y a une échelle de données, indiquant la taille de cette diapositive. Vous pouvez créer une page très grande ou très petite pour fournir un contraste de mise à l'échelle. Il existe également une fonction de rotation :

<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>

Copier après la connexion

Les données de rotation ci-dessus représentent l'angle de rotation.

Enfin, vous pouvez fournir un indice pour indiquer à l'utilisateur qu'il doit utiliser les touches fléchées du clavier pour contrôler l'ensemble du processus de lecture. Si l'utilisateur clique simplement sur la diapositive et qu'il n'y a pas de réponse, cette invite apparaîtra automatiquement.

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

Copier après la connexion

À la fin de la page, vous devez charger Ensure.js. Je cite ici directement la page de l'auteur, mais s'il s'agit d'un affichage hors ligne, il est recommandé de le télécharger et de l'utiliser. Il ne suffit pas de charger js, vous devez également utiliser Ensure().init() pour le démarrer.

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

Copier après la connexion

En fait, cet outil a de nombreuses fonctions, je viens d'apprendre certaines des fonctions les plus basiques. La suggestion sur le site officiel est de regarder directement l'index.html fourni par celui-ci. Il contient des commentaires détaillés pour vous indiquer ses fonctions. J'ai créé une page et je l'ai modifiée à partir de l'index.html fourni par l'auteur. Bien que ces choses soient très simples, elles suffisent pour créer des diapositives pour un discours. La page que j'ai créée est placée sur Gist, et le code global se trouve à la fin de cette page.

Bien sûr, des outils similaires ne peuvent que mentionner Prezi, qui est la première mise en œuvre de cette idée, mais on dit qu'il ne prend pas en charge le chinois. Tencent AlloyTeam domestique a également développé un outil appelé iPresst, qui peut être considéré comme un bon outil pour les imbéciles, mais comme il s'agit d'un réseau social, il est un peu privé. Le plus gros défaut d'impress.js est qu'il est trop geek. S'il existe un outil de développement WYSIWYG, il sera certainement popularisé.




 
 
 
 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>

Copier après la connexion

Le contenu ci-dessus est ce que je partage avec vous sur l'utilisation d'Impress.js pour créer des diaporamas. Le code est très simple. J'espère qu'il sera utile à tout le monde.