Saltar al contenido

Presentaciones en Linea con Impress.js

La mayoría de las personas, cuando se les pide que hagan una presentación, su primera opción sería la diapositiva de Microsoft Powerpoint. Sí, es rápido y fácil. Sin embargo, la limitación es que solo puede personalizar la animación y el efecto tanto como estén predefinidos en el programa. Además, si desea compartir su presentación en línea, las audiencias deben descargar el archivo completo en lugar de verlo en el navegador web.

Y ahora, si le dijera que puede hacer una presentación impresionante que los usuarios puedan ver en todos los navegadores web modernos. Puede usar la transformación CSS3 para su efecto de transición de diapositiva o incluso crear una diapositiva 3D. Señoras y señores, permítanme presentarles a impress.js!

Te puede interesar:   Tutorial Typed.js | Animación de escritura en Javascript

impress.js es un marco de presentación que utiliza el efecto de transformación CSS3. Puede diseñar y crear su diapositiva con algunos conocimientos básicos de HTML y CSS. No, no tienes que preocuparte mucho por el diseño. Simplemente siga la estructura del marco y se encargará del resto. Ver tutorial rápido a continuación

Primero, crea una página HTML para tu presentación. Luego crea un div con id = “impress”. Este div representará su presentación.

<div id = "impress" > </div>

Ahora, la diapositiva, puede crear una diapositiva colocando un nuevo div dentro de impress div y asignarle una clase de “paso”

<div id = "impress" > 
<div class = "step" data-x = "0" data-y = "0" >    
<p > Esta es mi primera diapositiva !! </p> 
</div> 
<div class = "step" data-x = "0" data-y = "1000" >    
<p > Esta es mi segunda diapositiva !! </p> 
</div> 
</div>

El atributo data-x y data-y es la posición de la diapositiva. Imagina que tu presentación es una llanura xy. Así que nuestra primera diapositiva se colocará en el origen y la segunda diapositiva estará 1000 píxeles por encima de la primera diapositiva.

Te puede interesar:   Tabla con listado de Países MYSQL

A continuación, incluya el archivo impress.js e inicialícelo.

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

¡impress.js leerá todo su elemento de presentación y agregará automáticamente el efecto de transición entre su primera y segunda diapositivas! ¡Ya está lista tu primera presentación!

Vea a continuación la lista de reproducción de demostración y tutorial completo.

Un último pensamiento, a pesar de que impress.js está destinado a ser utilizado como un marco de presentación, pero veo el potencial para implementar el efecto visual en el sitio web. Por ejemplo, he usado impress.js (con algunas modificaciones) para el efecto de transformación entre contenido dinámico.

Impress.js: https://github.com/impress/impress.js

0/5 (0 Reviews)
Comparte