HTML5 Slides framework
Just a simple slides framework built on HTML5 technologies
How to apply this framework
-
Write your slides document
- using HTML5 structure as usual
- But remember each section/header/footer element will be treat as one slide
- Currently nest sections are not support well, improvement in plan
-
Add these codes to your head of document:
// change /Slides to your path // or http://raw.github.com/hax/Slides/master/src/ if you just want to use the latest version <link rel="stylesheet" href="/Slides/src/common.css"> <link rel="stylesheet" media="projection, screen and (min-width: 780px)" href="/Slides/src/projection.css"> <link rel="alternate stylesheet" title="slides" href="/Slides/src/play.css"> <script src="/Slides/src/app.js"></script>
-
Play slides
- Press F11 (or any key which switch to fullscreen mode in your browser) to start/stop playing slides
- In playing mode, press right arrow / pagedown to next slide and left arrow /pageup to previous slide
- Browser back/forward button also works
Browser Compatibility
This is a very new framework which only be tested under recent Chrome/Firefox, but it should work on any HTML5 browser.
HTML5 API this framework used:
-
document.querySelectorAll
-
Element.classList (compatibility patch in plan)
-
popstate event (I plan to add compatibility patch for old browsers which not support popstate event in near future)
-
window.fullScreen / fullscreenchange event (Mozilla-only API but a compatibility patch included)
-
document.enableStyleSheetsForSet (CSSOM API, compatibility patch included though the implementation is not correct as spec)
CSS features this framework used:
-
media query (min-width)
-
css3 animation (WebKit extension, so u may not see animation in non-WebKit browsers)
Note: In general, all compatibility patches will be factor out and move to another project https://github.com/hax/homemade-html5 in the future.