Tutoriel impress.js

De EduTech Wiki
Aller à la navigation Aller à la recherche

Définition

Impress.js est une technologie de présentation qui s'appuie sur les transformations et transitions CSS3.

Selon Bartek Szopka, le créateur, l'idée lui est venue quand il jouait avec les transformations CSS. Prezi.com en a inspiré le design.

L'utilisateur doit coder la présentation en HTML et adapter la feuille de style CSS à ses besoins.

Pages à consulter:

Exemple

Regardez d'abord test.html (y compris le source!)

Notre code CSS définit cinq types de "steps" (traduit par "item"):

  • slide: Transparents
  • normal: item normal (pas de look de type "slide")
  • note: petites notes
  • thoughts: grandes pensées exprimées avec une seule phrase
  • picture: images avec une petite légende

Chaque type est associé à une classe CSS qui redéfinit le style de certaines balises HTML 

 <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
  ....
  </div>
  <div id="slide3" class="step note" data-x="200" data-y="-1100" data-scale="0.2">
    <p>One <b>bold</b> idea</p>
  </div>

Liste de balises HTML stylés:

  • h1, ul, ol, li, p, q, big, b
slide normal note thoughts picture
h1 Very large and up Very large no no no
ul,ol,li yes yes no no no
p yes yes no very large small (use for captions)
q yes yes no very large rotated, red and 500px down (adjust if needed)
big yes yes yes yes no
b yes yes yes yes no


A la fin de votre code HTML, n'oubliez pas: 

  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
  </div>
</html>

Fichiers

Premiers pas pour une présentation simple

La squelette de votre page HTML

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
      C'est ici que vous allez insérer les différents slides .....
   </div>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

L'insertion des slides

Maintenant que vous avez créé le corps de votre page HTML, vous allez pouvoir insérer le code pour les différents slides que vous souhaitez afficher dans votre présentation. A noter que tous les slides seront insérer dans le cadre appelé 'impress'.

Le code suivant insère un premier slide appelé 'slide1' 

<div id="slide1">
    <p style='width:1000px; font-size:80px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
</div>

Voici à quoi ressemblera le code de notre fichier html: 

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
	<div id="slide1" class="step slide">
            <p style = 'font-size:40px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
    	</div>
   </div>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Explication du code

  • Votre page html doit être liée à la feuille de style impress-min-presi.css. Ceci est indispensable afin de pouvoir afficher correctement votre présentation. D'autre part vous devez vous assurer que le fichier impress-min-presi.css soit accessible depuis votre page html.
  • Le id du cadre permet de l'identifier. Le script impress.js l'utilise pour faire la transition d'un slide à un autre. Si vous ne mentionnez pas cet identificateur, le script utilisera des valeurs par défaut. A noter que ces identificateurs peuvent être utilisés pour formater vos slides.
  • Tous les slides doivent avoir 'step' comme valeur pour l'attribut 'class'. Les autres valeurs pour l'attribut class permettent de définir l'aspect qu'on veut donner au slide (ici c'est la valeur slide qui a été choisie), voir point 1.
  • Tout ce qui est à l'intérieur de la balise 'div' sera affiché dans ce premier slide.

Les effets d'animations

Les mouvements de translations

Les attributs suivants définissent les coordonnées du centre de chaque slide: data-x, data-y, data-z

Exemple: Un slide avec les coordonnées de son centre = (x, y) = (100, 0) 

<div id="slide2" data-x="100" data-y="0">
Le slide suivant a les coordonnées x=100 et y=0	                    
</div>

En changeant les coordonnées x,y,z on simule un mouvement de translation d'un slide vers un autre.

Les mouvements de rotations

Les attributs suivants définissent un mouvement de rotation selon l'axe des x,y ou z: data-rotate-x, data-rotate-y, data-rotate-z

Exemple: Un slide qui apparaîtra avec une rotation de 90 degrés dans le sens des aiguilles d'une montre. 

<div id="slide2" data-scale-x=’90′>
Ce slide tournera de 90 degrés dans le sens des aiguilles d'une montre.	 
Autre mouvement de rotation plus large
<div id="slide3" class="step" data-x="2800" data-z="3000" data-rotate="300" data-scale="1">
Le data-z donne une impression de zoom, associé au data-rotate, qui donne une rotation large                   
</div>

L'effet de redimensionnement

Avec l'attribut data-scale, vous pouvez créer un effet de redimensionnement d'un slide vers un autre. Par exemple: Si la valeur de l'attribut data-scale du slide affiché est égale à 1 et 2 pour le slide suivant, alors ce dernier sera 2 fois plus grand que le premier. 

<div id="slide8" data-scale='3'>
Si la valeur de l'attribut data-scale du slide précédent vaut 1 alors le présent slide sera 3 fois plus grand	                    
</div>


Les coordonnées xyz

Les valeurs utilisées pour x,y,z définissent les coordonnées du centre du slide concerné.

Par exemple: 

<div id="slide1" class="step" data-x="0" data-y="0"  data-z="0">

Définit les coordonnées du centre du slide à (0,0,0).

x représente l'axe horizontal et permet de simuler les mouvements horizontaux, y est l'axe verticale et permet de faire des mouvements dans le sens haut-bas et z donne l'effet de 'profondeur'.

Liens

Official
Example code using in this page
Exemples
  • tecfa.unige.ch/tecfa/talks/schneide/SEM-2015/design-et-fabrication/A-design-et-fabrication-schneider.html
Tutorials
CSS transformation (on which impress.js is based)
Books
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_impress.js&oldid=48791 »