Hola buen día, ya muchos conocemos impress.js para hacer presentaciones atractivas con zoom, rotación y algunos otros efectos, ahora pongo mi ejemplo para iniciarlo automáticamente y detenerse en una diapositiva especifica.
Lo primero es descargar impress.js desde aquí, para los que no lo conozcan aún les dejo el ejemplo aquí
Ya que no tenemos descargado vemos que tenemos los siguientes archivos
Abrimos el archivo index.html con algún editor de código
Y casi al final del archivo buscamos la siguiente línea y la comentamos o borramos
|
1 |
<script>impress().init();</script> |
Ahora ponemos en su lugar el siguiente código
|
1 2 3 4 5 6 7 8 9 10 |
<script> var impress = impress(); impress.init(); document.addEventListener('impress:stepenter', function(e){ if (typeof timing !== 'undefined') clearInterval(timing); var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 2000); //to 2000ms timing = setInterval(impress.next, duration); }); </script> |
Con lo anterior ya tenemos el auto play
Ahora para detenerse en una pantalla especifica solamente agregamos la siguiente comparación
|
1 2 3 |
if (e.target.id === 'imagination') { var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 2000000); // use the set duration or fallback to 2000ms }; |
Donde “Imagination” es el identificador de la diapositiva, y ahora nos queda así
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var impress = impress(); impress.init(); document.addEventListener('impress:stepenter', function(e){ if (typeof timing !== 'undefined') clearInterval(timing); var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 2000); //to 2000ms if (e.target.id === 'imagination') { var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 2000000); //fallback to 2000000ms }; timing = setInterval(impress.next, duration); }); </script> |
En un post anterior recomendé prezi, que es una herramienta para hacer presentaciones con el mismo estilo pero sin meterse con código, les dejo el link aquí
Espero la información les sea de utilidad
