Impress.js – Una librería JS para realizar atractivas presentaciones

Impress JS es una librería que tiene una finalidad simple, realizar presentaciones atractivas con unas cuantas líneas de código HTML y que aprovecha el poder de CSS3, transformaciones 3D y HTML5. Esta alternativa es soportada por las últimas versiones de Google Chrome, Safari y Firefox, se realizó las pruebas en Internet Explorer 10 pero este navegador no lo interpreta correctamente.

A continuación un ejemplo simple de lo que se puede hacer con esta librería.

  1. Primero descargamos la librería desde GitHub https://github.com/bartaz/impress.js/
  2. Creamos un archivo HTML

    <html lang="es">
    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    </body>
    </html>
  3. Agregamos la librería JS, realizamos la llamada a la función inicializadora y creamos un DIV con el atributo ID con valor “impress”.
    <html lang="es">
    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    <div id="impress">
    </div>
    <script type="text/javascript" src="impress.js"></script>
    <script type="text/javascript">impress().init();</script>
    </body>
    </html>
  4. Hasta aca tenemos un código que no hace nada pero es la estructura básica para generar las presentaciones con impress.js.
  5. Agregamos los sliders de nuestra presentación con la ayuda de etiquetas DIV y con el atributo class igual a “step”.

    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    <div id="impress">
    <div class="step">
    <h1>enbolivia.com</h1>
    <p>www.enbolivia.com</p>
    </div>
    </div>
    <script type="text/javascript" src="impress.js"></script>
    <script type="text/javascript">impress().init();</script>
    </body>
    </html>
  6. Ya está listo nuestro primer slider, no olviden que por defecto la presentación es cíclica es decir que cuando se llegue al último slider volverá al primero.
  7. Agregamos 4 sliders más para dar más interacción a la presentación
    <div data-x="1000">
    <p> Los mejores sitios Web en internet</p>
    </div>
    <div data-x="1000" data-z="2000">
    <p>en Bolivia y el mundo</p>
    </div>
    <div data-x="1000" data-z="1000" data-rotate-y="-90">
    <p> M&aacute;s de 280 clientes</p>
    </div>
    <div data-x="2000" data-scale="2">
    <p>Visitenos en http://www.enbolivia.com</p&gt;
    </div>
  8. A continuación un detalle de los 4 sliders agregados recientemente:
    • En el slider 1 se agregó el atributo “data-x”, este atributo permite especificar donde se posicionará el elemento DIV, la posición indicada será centrada de forma automática, es decir tendremos un movimiento horizontal de izquierda a derecha de 1000 pixeles hasta que el DIV quede centrado.
    • En el slider 2 se agregó también el atributo “data-z”, este atributo permite especificar donde se posicionara el elemento DIV en el tercer eje de la 3ra dimensión, en este caso se mostrará un alejamiento de los objetos de la presentación 2000 pixeles de la posición original.
    • En el slider 3 se agregó el parámetro “data-rotate-y”, con un valor de -90, este atributo permite que todos los objetos de la presentación giren 90 grados en sentido contrario a las agujas del reloj.
    • Finalmente en el slider 4 se agrega el valor “data-scale”, este valor permite escalar el contenido del elemento DIV duplicando su tamaño (x2).
  9. Finalmente agregamos algo de estilos para diferenciar mejor los cambios
    <style type="text/css">
    .step {
    width: 400px;
    height: 400px;
    border: 3px solid #119988;
    padding: 10px;
    font-size: 20px;
    font-family: "arial";
    background-color: #aaeeee;
    }
  10. El resultado final será similar al siguiente
    Impress resultado final

Como verán la creación de sliders es muy sencilla, pero no se queda allí, la librería es muy poderosa, este ejemplo es solo para fines demostrativos, si desean obtener mayor información del uso de esta librería pueden visitar el sitio https://github.com/bartaz/impress.js/wiki/Examples-and-demos

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s