impress.js es un potente marco de presentación de CSS y Javascript. Proporciona todas las bibliotecas y archivos CSS necesarios para crear presentaciones complejas y visualmente inspiradoras usando HTML. Pero una advertencia antes de continuar, usar impress.js en su forma cruda se trata de crear archivos usando editores de texto y escribiendo manualmente el HTML. No hay ningún GUI elegante aquí, no WYSIWYG.
Nota : Aunque el tutorial que se muestra aquí se realiza en una plataforma Linux, los pasos son los mismos independientemente de la plataforma OS que esté utilizando. Impress.js es un script basado en web y es compatible con varias plataformas.
Para empezar, descargue impress.js de github . La forma más sencilla es ejecutar el siguiente comando desde la línea de comandos:
wgethttps://github.com/bartaz/impress.js/archive/master.zip
Y bájale la cremallera:
unzip master.zip
Dentro de la carpeta «impress.js-master», hay dos subcarpetas – CSS y JS, que contienen los archivos CSS y Javascript de impress.js respectivamente. En realidad no es necesario profundizar en la carpeta Javascript, sin embargo, la carpeta CSS contiene el archivo CSS de demostración que puede que desee modificar para sus propias presentaciones. También encontrará un ejemplo de presentación impress.js en el archivo index.html. Esto abrirá su navegador web predeterminado (con suerte, ya sea Firefox o Chrome) e iniciará la presentación.
He aquí cómo construir una presentación sencilla basada en el archivo CSS de ejemplo («css/impress-demo.css») suministrado con impress.js. Cree un archivo HTML utilizando un editor de texto. Puede usar un editor de texto como gEdit, o puede crearlo usando nano en la línea de comandos de esta manera:
nano demo1.html
Inserte el siguiente código en el archivo y, a continuación, guarde y salga (CTRL-X).
/ font color="#fefefe">#fefefe
DIFUNDE LA PALABRA-
All about impress.js / i>
impress.js es un poderoso marco de presentación de CSS y Javascript.
All about impress.js / i>
Proporciona todas las librerías y archivos CSS necesarios
para crear presentaciones complejas y visualmente inspiradoras usando HTML
All about impress.js / i>
Más información en http://bartaz.github.io/impress.js
impress.init.init.
/ i> / i> / i>.
Todos los archivos HTML se dividen en secciones que comienzan con una etiqueta de apertura (por ejemplo, ). Dentro de la sección "" la etiqueta "" define qué archivo CSS debe utilizarse (es decir, css/impress-demo.css). A medida que avances con impress.js, tendrás que crear tu propio archivo CSS.
En la sección de "cuerpo", hay una sección con la identificación de "impresionar". Aquí es donde impress.js espera encontrar las diapositivas. Cada diapositiva se llama "paso" y debe usar la clase "paso". En el ejemplo anterior, hay tres diapositivas, cada una marcada con una con la clase de "diapositiva escalonada".
Cada diapositiva tiene un atributo data-x y data-y que define la posición de las diapositivas. El valor de y permanece igual para los tres carros, pero el valor de x cambia. Comienza con -1000 y luego pasa a 0 y finalmente a 1000. El resultado es que las diapositivas se moverán de izquierda a derecha a medida que avance la presentación. Cambiando los valores de x y y puede conseguir que las diapositivas hagan la transición en cualquier dirección que desee.
Al final del archivo HTML hay dos líneas que cargan el script impress.js y luego inicializan la biblioteca impress.js (por ejemplo, impress().init).
Para probar el archivo, haga doble clic en demo1.html desde dentro de Nautilus.
Las transiciones de impress.js también pueden incluir rotación. Añada esta diapositiva a su presentación:
All about impress.js / i>
¡Rotación!
/ i>.
El atributo data-rotate le dice a impress.js que rote la vista en 90 grados durante la transición. El valor es absoluto, así que otra diapositiva con el valor de 90 no rotará si la diapositiva anterior tenía una rotación de datos de 90. Pruebe la nueva presentación en su navegador.
Otro atributo interesante es la escala de datos (es decir, el zoom). Esto puede dar a su presentación un estilo 3D al acercarse y alejarse del lienzo a medida que avanza la presentación.
Para ver el efecto de zoom, agregue la siguiente diapositiva a su presentación:
Zoom, además esto no parece una diapositiva.
/ i>.
Hay algunas cosas que vale la pena notar acerca de esta última diapositiva. Primero omite la clase "slide". Esto significa que la diapositiva se presentará sin el fondo blanco definido en el archivo CSS de ejemplo. Segundo, anote los valores de rotación y escala de datos. El atributo data-rotate devuelve el lienzo a 0 grados (desde la rotación de 90 grados en la diapositiva anterior). El atributo de escala de datos hace que impress.js realice un zoom durante la transición. Para ver su aspecto, pruebe la presentación en su navegador.
Ahora que ha dominado algunas diapositivas simples, intente leer index.html y "css/impress-demo.css" para ver cómo se construye la demo. El archivo index.html tiene abundantes comentarios para guiarte a través de los diversos elementos y clases.
Si tiene alguna pregunta sobre los ejemplos anteriores, por favor utilice la sección de comentarios de abajo y veremos si podemos ayudarle.
Fuente: este post proviene de Vida Tecno, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
