Presentaciones en Linea con Impress.js

⚡ Podras realizar tus presentaciones en linea usando Impress.JS un libreria de JS para que soprendas a tu clase o universidad. 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.

Presentaciones en Linea con Impress.js

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!

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.

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

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. Te puede interesar Sistema de Facturación en Php y Mysql

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