Gloria Okon | Jide Salu's Diary. 5 of the Best Free HTML5 Presentation Systems. I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include: it’s quicker to add a few HTML tags than use a WYSIWYG interfaceyou can update a presentation using a basic text editor on any devicefiles can be hosted on the web; you need never lose a PPT againyou can easily distribute a presentation without viewing softwareit’s not PowerPoint and your audience will be amazed by your technical prowess.
Admittedly, HTML5 presentations are not quite as powerful: Here are the best HTML5 presentation systems I’ve found. Reveal.js Impress.js Deck.js. 6 Plugin for Impressive HTML Slideshow And Presentation - Javascript. Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. The following is 6 javascript plugins that allow you to do that. Some potentially can be a good script to make your own portfolio website.
You will need latest browsers that support CSS3 3D transform. impress.js It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transform and transition in modern browsers. About Kevin Kevin Liew is a web designer and developer and keen on contributing to the web development industry. CSS4 Sneak Peak. Deck.js » Modern HTML Presentations.
Deck.js » Modern HTML Presentations. Slideshow with jmpress.js. Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations.
The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: Using Impress.js : Tony Thomas. March 9, 2012 11:08 am Published by admin Update II: I updated the init method needed in the HTML. Update: There is at least one WYSIWYG impress.js editor available now.
I came across Impress.js a while back and I was, well, impressed. It makes sense to do presentations on the web, given the powerful animations and transitions available in modern browsers. Impress is sort of like Prezi improved. Right now you can only learn how to use Impress.js by reading the comments and experimenting. The first thing is that you have to have a story to tell. Assuming you know what you want to say, let’s move on. First you’ll need to download the JavaScript. The slides need to go into an element with the id of “impress.” Options Now things get interesting. You can give you slides ids so you can link to a particular slide. The next dimension we can control is scale: Note the data-scale attribute above. We can also control rotation: For this, use data-rotate. And now we go 3d: Those are the options.