Tutoriel impress.js

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

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 a inspiré le design.

L'utilisateur doit coder en HTMLet adapter la feuille de style CSS à ses besoins.-

Voir: en:Impress.js

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

Liens

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