tuto:webapps:impress.js

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision 		Révision précédente
tuto:webapps:impress.js [11/11/2013 11:07]
heuzef créée 		tuto:webapps:impress.js [12/11/2013 16:17] (Version actuelle)
heuzef
Ligne 5: Ligne 5:
 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 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 html>+<code javascript>
 <script src="js/impress.js"></script> <script src="js/impress.js"></script>
 <script>impress().init();</script> <script>impress().init();</script>
Ligne 15: Ligne 15:
 ===== Strut ===== ===== Strut =====
  
-Strut est un editeur en ligne très efficace permettant de créer des diaporama avec impress.js. Il peux fonctionner hors-ligne.+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]] Site officiel : [[http://strut.io]]
Ligne 23: Ligne 23:
 ==== Lecture automatique ==== ==== Lecture automatique ====
  
-Pour ajouter une fonction de lecture automatique à strut (autoplay). Il faut modifier la fonction ''impress().init();'' du fichier HTML. 
-Cherchez et repérer le code suivant : 
  
 +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> <code javascript>
 <script> <script>
Ligne 31: Ligne 30:
     if (document.getElementById('launched-placeholder'))     if (document.getElementById('launched-placeholder'))
         loadPresentation();         loadPresentation();
 + 
     if (!window.presStarted) {     if (!window.presStarted) {
         startPres(document, window);         startPres(document, window);
         impress().init();            impress().init();   
     }     }
 + 
     if ("ontouchstart" in document.documentElement) {      if ("ontouchstart" in document.documentElement) { 
         document.querySelector(".hint").innerHTML =          document.querySelector(".hint").innerHTML = 
Ligne 44: Ligne 43:
 </script> </script>
 </code> </code>
 +
  
 Et remplacez le par ce code : Et remplacez le par ce code :
 +
  
 <code javascript> <code javascript>
Ligne 52: Ligne 53:
     if (document.getElementById('launched-placeholder'))     if (document.getElementById('launched-placeholder'))
         loadPresentation();         loadPresentation();
 + 
     if (!window.presStarted) {     if (!window.presStarted) {
           startPres(document, window);           startPres(document, window);
           var autoAdvTime = 5000; //AUTOPLAY (Milliseconds)           var autoAdvTime = 5000; //AUTOPLAY (Milliseconds)
           impress().init();           impress().init();
-          window.setTimeout(autoAdv, autoAdvTime);  
           function autoAdv() {           function autoAdv() {
              impress().next();              impress().next();
              window.setTimeout(autoAdv,autoAdvTime);              window.setTimeout(autoAdv,autoAdvTime);
           }           }
 +          window.setTimeout(autoAdv, autoAdvTime); 
     }     }
 + 
     if ("ontouchstart" in document.documentElement) {      if ("ontouchstart" in document.documentElement) { 
         document.querySelector(".hint").innerHTML =          document.querySelector(".hint").innerHTML = 
Ligne 71: Ligne 72:
 </script> </script>
 </code> </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. Vous pouvez facilement changer la durée des transitions en modifiant la valeur ''var autoAdvTime = 5000;''. 5000 = 5 secondes, le temps est en millisecondes.
  • tuto/webapps/impress.js.1384164436.txt.gz
  • Dernière modification: 11/11/2013 11:07
  • de heuzef