Slyde is a web based presentation tool that even functions without JavaScript.
See the source of this document for documentation on the how and why.
Each slide needs an id. Using this id, each slide can be targeted via the location's hash. This slide
for example has the id slide2, which maches the hash of the URL.
Since each slide has an id, you can directly link to any slide within a presentation. This - again - works without Javascript.
The slides are automatically scaled to fit into the viewport, while maintaining an aspect ratio of
16 / 9. The content is scaled accordingly. Note that you have to set all dimensions in em
or rem.
Transitions between slides is done with CSS.
If JavaScript is available, Slyde will add a keyboard navigation. Use the arrow keys to navigate through the slides.
Try the Page Down, Page Up, Home and End keys as well as the left and right arrow keys.
The slide numbers are automatically generated by CSS.
Sometimes you wish several elements like list items to appear one after the other. This is easy, just
add class="increment" to those elements.
When Javascript is not available, all incremental elements will be shown directly.
The order can be set.
You can create your own layouts using the user.css file. You can add behaviour using the
user.js file. Try listening to the onhashchange event to react on switching
slides.
Works best in modern browsers that support the vw, vh, transition
and calc() features of CSS. That is Android 4.4+, Internet Explorer 11, Edge, Firefox,
Chrome, Opera, Safari, Samsung Internet and more, however neither Android 4 nor Opera Mini.
Nothing in the pipeline at the moment. Have any ideas? Feel free to open an issue.
Either save this file and the linked resources or download it at github.com/gweax/Slyde.
You can contact me via mail or twitter: