Faire une présentation à la prezi avec impress.js

Vous souhaitez faire de jolies présentations à la prezi simplement avec un peu de code html/css3 et bien sûr compatible avec tous les navigateurs récents ? Essayez impress.js. ! impress.js est un framework js open source qui permet de créer des présentations avec de multiples effets de transitions JS/CSS3 pour vos slides. Il permet de changer un peu des présentations standard de type PowerPoint et ouvre de nouvelles possibilités en terme de présentation en jouant sur la profondeur et  notamment la 3D. Autre avantage, il permet de s'affranchir de tout OS / logiciel propriétaire particulier. Plus besoin d'office pour lancer votre présentation, un simple navigateur web suffit !

Voici un aperçu de la démo officielle : http://impress.github.io/impress.js/#/bored

Utilisation

Pour initialiser le framework, il suffit d'inclure la librairie et de faire l'appel comme ceci :

<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
initialisation impress.js

Le contenu de la présentation doit être mis dans une div avec l'id "impress", ce qui nous donne ceci :

<html lang="fr">
    <head>
        <title>Impress Demo</title>
    </head>
    <body>
    <div id="impress">
    
    </div>

    <script type="text/javascript">impress().init();</script>
    <script type="text/javascript" src="js/impress.js"></script>
    </body>
</html>

Chaque slide ensuite est une div avec un id unique et avec laquelle on va pouvoir fournir différents attributs qu'on peut retrouver sur le wiki ici : https://github.com/impress/impress.js/wiki/Html-attributes

Je vous invite à regarder la source de l'exemple du site officiel, tout y est expliqué en détail : https://github.com/impress/impress.js/blob/master/index.html

Maintenant, vous allez pouvoir coder vos "présentations powerpoint" !

 

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *