CODEWITHSUNDEEP
htmlslideshow
MT3
MT3

Reputation: 1065

How to mimic Powerpoint presentation feel using HTML/CSS and javascript

I was looking at an HTML5 presentation and was wondering if anybody knew how the actual presentation was created. You can zoom in and out and view all the slides. You can also navigate with your keyboard.

Here's the site with the slideshow: http://slides.html5rocks.com/#slide5

Upvotes: 1

Views: 6041

Answers (3)

seantomburke
seantomburke

Reputation: 11692

There is a very useful CSS3, HTML5 library called impress.js at http://bartaz.github.com/impress.js/

Upvotes: 2

Trott
Trott

Reputation: 70065

You can definitely do as Robusto suggests and view source and go from there.

But you might find it easier to get a more stripped version by going to http://studio.html5rocks.com/#Deck and downloading the sample from there. It's the same thing basically but has fewer external dependencies and fewer initial slides so it might be easier to work with. Basically, put the content of each slide in a <div class="slide">...</div> the way you see it with the four sample slides in the source code.

Upvotes: 2

Robusto
Robusto

Reputation: 31883

First of all, it's not really mimicking PowerPoint. It's surpassing PowerPoint. :) Second, it's doing what the URL implies: rocking your world with HTML 5. Each slide is an example of markup and CSS (and Javascript) available in HTML 5. To find out all about how they do it, right-click on the page and choose "View Source" ... it will show you all the markup and scripting etc.

Upvotes: 2

Related Questions