« Tutoriel impress.js » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 92 : Ligne 92 :
   </div>
   </div>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript" src="js/impress.js"></script>
   <script type="text/javascript" src="impress.js"></script>
</body>
</body>
</html>
</html>

Version du 29 septembre 2017 à 14:17

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.

Principe

Comme pour prézi (allez voir la page, lien ci-dessus), une présentation impress.js est composée de plusieurs "steps".

La vue d'ensemble peut donner ceci :

An impression of the overall presentation canvas (from the impress.js demo)

L'objectif est de pouvoir rendre une présentation dynamique et originale.

Exemple

Regardez test.html (y compris le code source!)

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

  • slide:diapositive
  • normal: item normal (pas de look de type "slide", c'est-à-dire un "fond transparent")
  • note: petites notes
  • thoughts: grandes pensées exprimées avec une seule phrase
  • picture: images avec une petite légende

Chaque type de balise 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ées:

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

Cette manipulation vous permettra d'avoir une vue d'ensemble (vue carte).

Pages à consulter pour précisions

Premiers pas pour une présentation simple

Fichiers à télécharger

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="impress.js"></script>
</body>
</html>

Organisation du fichier HTML et Insertion de slides

Tout d'abord, notez que tous vos "steps" doivent être insérés dans une balise les englobant tous : <div id="impress"> (un peu comme un sous "body") donc AVANT d'insérer les codes de vos steps, il faut vous assurer que cette balise est bien présente.

Ensuite, pour créer des slides:

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" class="step" 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" class="step" 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'.

Mécaniques de transitions

De base, les transitions sont scriptées pour que les slides s'affichent les unes après les autres. Il est possible d'influer sur cet ordre grâce à la fonction impress() qui donne un accès à l'API contrôlant la présentation. Cela donne accès à quatre fonctions utilisables:

  • impress().init() : initialise la présentation
  • impress().next() : bouge à la prochaine étape de la présentation
  • impress().prev() : bouge à la précédente étape de la présentation
  • impress().goto() ( idx | id | element, [duration]) : bouge la présentation à l'étape choisie. La première variable définit l'étape par son numéro d'index, son id ou son élément DOM, la seconde définit la durée de la transition en millisecond (ms).

Cette dernière fonction est très intéressante car elle permet d'agir précisément sur la présentation.

Exemple: Aller au slide n°5 à l'initialisation de la présentation sans temps de transition. On change la mécanique de transition car le slide précédent sera le n°4 et le suivant le n°6. 

<script src="impress.js"></script>
<script>impress().init();</script>
<script>impress().goto(slide5,0)</script>

Liens

Official
Example code using in this page
Exemples
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=72441 »