tuto:webapps:impress.js [WikiT]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Impress.js ======

Basé sur CSS3, permettant de faire de jolies présentations similaires à celles proposés par Prezi mais sans flash et compatibles tous navigateurs récents, voici Impress.js.

Il s'agit d'un framework qui permet de concevoir des présentations avec des transitions très sympathiques pour vos slides. Une fois que votre contenu est prêt, il suffit d’appeler impress.js

<code javascript>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</code>

Si vous voulez voir ce que ça peut donner, il y a des tonnes d'exemples et de démo [[https://github.com/bartaz/impress.js/wiki/Examples-and-demos|sur cette page]]. Il existe différentes sortes de transitions et [[https://github.com/bartaz/impress.js/blob/master/index.html|la doc est là]]. Y'a plus qu'à !


===== Strut =====

Strut est un editeur en ligne très efficace permettant de créer des diaporamas avec impress.js. Il peux fonctionner hors-ligne.

Site officiel : [[http://strut.io]]

Editeur : [[http://strut.io/editor]]

==== Lecture automatique ====


Pour ajouter une fonction de lecture automatique à strut (autoplay). Il faut modifier la fonction ''impress().init();'' du fichier HTML. Cherchez et repérez le code suivant :
<code javascript>
<script>
ready(function() {
    if (document.getElementById('launched-placeholder'))
        loadPresentation();
 
    if (!window.presStarted) {
        startPres(document, window);
        impress().init();   
    }
 
    if ("ontouchstart" in document.documentElement) { 
        document.querySelector(".hint").innerHTML = 
            "<p>Tap on the left or right to navigate</p>";
    }
});
</script>
</code>


Et remplacez le par ce code :


<code javascript>
<script>
ready(function() {
    if (document.getElementById('launched-placeholder'))
        loadPresentation();
 
    if (!window.presStarted) {
          startPres(document, window);
          var autoAdvTime = 5000; //AUTOPLAY (Milliseconds)
          impress().init();
          function autoAdv() {
             impress().next();
             window.setTimeout(autoAdv,autoAdvTime);
          }
          window.setTimeout(autoAdv, autoAdvTime); 
    }
 
    if ("ontouchstart" in document.documentElement) { 
        document.querySelector(".hint").innerHTML = 
            "<p>Tap on the left or right to navigate</p>";
    }
});
</script>
</code>


Vous pouvez facilement changer la durée des transitions en modifiant la valeur ''var autoAdvTime = 5000;''. 5000 = 5 secondes, le temps est en millisecondes.