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

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

Si vous voulez voir ce que ça peut donner, il y a des tonnes d'exemples et de démo sur cette page. Il existe différentes sortes de transitions et la doc est là. Y'a plus qu'à !

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

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 :

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

Et remplacez le par ce code :

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

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