Thursday, May 29, 2014

Working with impress.js to create presentations using HTML & CSS3 - impress.js

Impress.js was awesome plugin to create awesome presentation because it uses HTML and CSS3 to animate and make the presentation still more lively for the sametime the Author of impress.js warns about the usage of the presentation will be nice only if it is interesting and it's not suitable for the official meets presentations.however it is easy to set up the plugin environment and start our presentation slides.I hope it works only on modern browsers.i have already used Fathom.js but it was regular for official purpose but this one is quite interesting to display interesting streams.
preview img from presentation slide impress.js

Browser compatibility: 

Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10. With addition of some HTML5 polyfills (see below for details) it should work in Internet Explorer 10 (currently available as Developers Preview). It doesn't work in Opera, as it doesn't support CSS 3D transforms.As a presentation tool it was not developed with mobile browsers in mind, but some tablets are good enough to run it, so it should work quite well on iPad (iOS 5, or iOS 4 with HTML5 polyfills) and Blackberry Playbook.


just like other javascript just include both impress.js and demo-impress.js in your html file in between <head></head> tags.get the orginal source from here.

<link href="/demo-css.css" rel="stylesheet" /> 
<script src="/impress.js" ></script>

Usage :

Lets start with normal Html tags below

<html lang="en">
        <meta charset="utf-8" />
           <!-- your CSS and JS files can be included here. --> 

now lets dive into slides where i have made them in to div tags and mentioned them with classes and ID's.

check browser issues:

before that we must check the browser support if it supports then we could proceed normally! or else we must highlight by showing them Error message and try in latest browsers.

<div id="impress" class="impress-not-supported">

    <div class="fallback-message"> <!-- this fallback message shows when issues exist -->
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>

  <!-- your slides div can go here -->

</div> <!-- end of div class="impress-not-supported" -->

slides as div tag : 

before directly creating tags,just imagine a graph sheet in which you reference with X,Y,Z axis in which our div slides are going to be placed.our javascript plugin takes the value from div and moves around accordingly with CSS3.
it is mandatory to use Class step in each of our div slides.and you can mention other options if you want.

General Approach of Div slide:

<div class="step" data-x="Preferred_value" data-y="Preferred_value" data-z="Preferred_valuedata-rotate="Preferred_option" data-scale="Preferred_option">

  <!-- here you could use your own style of HTML coding for contents --> 


Example for Div slide:
data-x : which moves along x-axis slide
data-y : which moves along y-axis slide
data-z : which moves along z-axis slide
data-rotate : which rotates around and reach your slide normally
data-scale : which scales above the slide(zoom level)

<div class="stepdata-x="200data-y="200data-z="100data-rotate="45data-scale="5">

  <!-- here you could use your own style of HTML coding for contents --> 
<p>welcome to</p>
<p>i love to create and share my ideas through my blog </p>
<p>i love to create web/mobile apps as a hobby and my interest is to work with Bigdata and analytics</p>


additional to this we could add some extra effects 3D with id="its-in-3d" and giving option to rotate in their axis 
data-rotate-x & data-rotate-y & data-rotate-z : which rotates when sliding on their axis corresponding, can be a 3D view.however it is simple and easy to code.

<div class="stepdata-rotate-x="200data-y="200data-z="100data-rotate="45data-scale="-5" id="its-in-3d">

  <!-- here you could use your own style of HTML coding for contents --> 
<p>it's a 3d view here..</p>


<!-- this is the last slide of the presentation mentioned with id="return" to go back to our first slide -->

<div id="return" class="step" data-rotate="0" data-y="2000" data-x="2000">
<p>join us ! code with us or create ideas | visit</p>

<!-- this can be hint for users to naviagte with spacebar or arrow keys -->

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>


contributors have added some audio and other specific functions go through them in Github official impress.js.if you can find more options and bugs in my demo/code comment below!

This can be more innovative and interesting when you can think logically using graphs.other can simply use the template provided.I have mentioned options which i have used in this presentation,if i had missed out or any bugs,comment and notify me via E-mail.share is care.


Post a Comment

feel free to post your comments! Don't Spam here!