Good Ideas

Impress.js per impressionare con favolose presentazioni web

Posted by:

|

On:

|

Impress.js è un framework javascript per creare presentazioni favolose, utilizzando le potenzialità fornite dal CSS3.

Come usarlo? Includete nella pagina la libreria javascript impress.js, codificate le slides in puro html, e lanciate il comando

impress().init();

… e la vostra pagina web si trasformerà in una strabiliante presentazione con transizioni 3D animate. Ammetto che per pubblicare una buona presentazione occorra un po’ di dimestichezza con i valori 3D di posizionamento delle slides che vengono incluse come attributi data-x, data-y, data-z nei tag <div>.

Non c’è una pagina di documentazione ma la presentazione demo ha un codice sorgente parlante ottimamente documentato con lo scopo di spiegare tutte le funzionalità di impress.js.

Partendo dalla demo ufficiale ho creato un esempio interattivo con JsFiddle. Potete eseguirlo premendo il tasto play blu, oppure giocarci modificandone il codice. A presentazione avviata, premete il tasto [spazio] per cambiare slide.

Strut 2.0

Esistono anche IDE web per la creazione visuale di presentazioni impress. Il migliore che ho trovato è strut 2.0. E’ uno strumento davvero semplice da usare. Dapprima si creano le slides, inserendo testi, immagini o video. Poi si posizionano nello spazio le slides impostando i parametri X, Y, Z e il livello. Infine si può osservare il risultato ottenuto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *