Tutoriel impress.js
Cet article est incomplet.
Il est jugé trop incomplet dans son développement ou dans l'expression des concepts et des idées. Son contenu est donc à considérer avec précaution.
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.
Voir aussi:
Exemple
Regardez d'abord test.html (y compris le source!)
Notre code CSS définit cinq types de "steps" (traduit par "item"):
slide
: Transparentsnormal
: item normal (pas de look de type "slide")note
: petites notesthoughts
: grandes pensées exprimées avec une seule phrasepicture
: 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
- Directory: http://tecfa.unige.ch/guides/impress.js/impress-demo-1/
- test.html
- impress.js
- impress-min-presi.css
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
- Impress.js homepage
- impress.js tutorials and other learning resources (links)
- Examples and demos (links)
- Source code It's the documentation
- 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
- How To Use Impress.Js, Posted on January 4, 2012
- No More Powerpoint I Have Impress.js, Paulund, Updated: March 31st, 2013
- CSS transformation (on which impress.js is based)
- en:CSS transforms tutorial
- CSS Transforms Level 1, W3C working draft
- CSS transform documentation at mozilla.org.
- Browser compatibility table at mozilla.org
- Books
- Rakhitha Nimesh Ratnayake (2013), Building Impressive Presentations with impress.js, Packt Publishers, ISBN 1849696489