timesheets.js

Basic Effects

A quick slideshow designed with declarative, inline SMIL-Timing markup.

This demo shows how to get most of the common slideshow effects (transitions, incremental display, outlining…) with SMIL-Timing.

Audio Sync

SMIL Timing and Timesheets are an easy and efficient way to sync an HTML slideshow with an audio track.

This slideshow is an HTML version of this presentation of the Join Mozilla program by Mark Surman. Mark has published his slides as a video, we’re taking it a bit further by keeping the content in HTML (accessibility, indexability…) and sync’ing it with his audio track.

SVG

Our timesheets.js library can also be used on SVG documents.

This mini-slideshow is a full SVG document. Each slide is an SVG <g>roup element which is activated with CSS properties.

A slideshow (in French) sync’ed with video and audio tracks. In this demo, the video and the audio pages share the same timesheet and almost the same HTML markup.

This is not a pure HTML slideshow: all slides are just PNG images. You can use ImageMagick to export your PDF slideshow to a set of images that you can display in a web page and sync with HTML Timing.

See more examples at ENS Lyon (in French).